间隔旋转和淡出

Question

我有点迷茫，我想制作一个我的 CSS DIV 的退出/进入动画，带有旋转/淡出效果，然后使用 10mn 旋转/淡入每次迭代之间的延迟。

我不知道是否可以完整css，我想我必须在Javascript内完成动画，但这不是我的强项。

有关信息，这是代表我的代码 DIV。

@import url(https://fonts.googleapis.com/css?family=Lobster);

body {
  font-family: 'Lobster', cursive;
}
.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top:20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*-----------------------*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
  
}

span:nth-child(1), span:nth-child(7) { 
font-size: 30px;
}

span:nth-child(2), span:nth-child(3), span:nth-child(5)  {
  font-size: 55px;
}

<div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>

提前感谢您的帮助:)

Answer 1

这是一个使用 jQuery 的潜在解决方案。

$(function() {
  setTimeout(function() {
    $('.logo').animate({
      deg: 360
    }, {
      duration: 1200,
      step: function(now) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        });
      },
      done: function() {
        $(this).fadeOut("slow");
      }
    });
  }, 1000);
});

@import url(https://fonts.googleapis.com/css?family=Lobster);
body {
  font-family: 'Lobster', cursive;
}

.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top: 20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*-----------------------*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
}

span:nth-child(1),
span:nth-child(7) {
  font-size: 30px;
}

span:nth-child(2),
span:nth-child(3),
span:nth-child(5) {
  font-size: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo">
  <div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>
</div>

包装徽标，然后我们可以为日志旋转设置动画，然后淡出。

查看更多：https://api.jquery.com/animate/

间隔旋转和淡出

Rotation and fade-out with interval

html

jquery

css

animation

css-animations