我想降低动画的速度

时间:2017-10-29 08:09:37

标签: html css css3 css-animations keyframe

这是我的代码,我在其中设置一个简单的div动画。但问题是,当 X 增长到完整尺寸时,我希望减慢速度,因为您可以看到它突然闪烁并缩小。

有人可以帮助我。



html {
  background: black;
  overflow: hidden;
  height: 100%;
}

.loader {
  height: 40px;
  width: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
}

.loader:before,
.loader:after {
  content: "";
  height: 40px;
  width: 40px;
  border: 8px solid black;
  border-radius: 10px;
  position: absolute;
  top: 0;
  background-color: red;
}

.loader:before {
  animation: animate 5s infinite ease-in-out;
}

.loader:after {
  animation: animate2 5s infinite ease-in-out;
}

@keyframes animate {
  100% {
    transform: rotate(180deg) skew(360deg);
  }
}

@keyframes animate2 {
  100% {
    transform: rotate(-180deg) skew(-360deg);
  }
}

<div class="loader">
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

尝试此操作以减慢最后的动画

    animation: animate 5s infinite ease-out;