Question

我是CSS3动画的新手，也是我喜欢here的动画。不幸的是，动画存在于jQuery easings库中，它依赖于jQuery，而我当前的项目却没有。

如何使用CSS3关键帧实现此动画来设置div的宽度？

Answer 1

您需要查看值中的极值点，并将其用作关键帧。另外，要注意不同的计时功能

.test {
  width: 300px;
  height: 40px;
  background-color: lightgreen;
  animation: grow 5s infinite;

}

@keyframes grow {
   0% {width: 100px; animation-timing-function: ease-in}  
  30% {width: 600px; animation-timing-function: ease-out}
  45% {width: 400px; animation-timing-function: ease-in}
  60% {width: 600px; animation-timing-function: ease-out}
  70% {width: 500px; animation-timing-function: ease-in}
  84% {width: 600px; animation-timing-function: ease-out}
  92% {width: 550px; animation-timing-function: ease-in}
 100% {width: 600px; animation-timing-function: ease-out}
 
}

<div class="test"></div>

Answer 2

你的css看起来像这样：

.slide-width {
      animation: slide-width 3s linear 0s forwards;
      -webkit-animation: slide-width 3s linear 0s forwards;
}

关键帧将是这样的：

@-webkit-keyframes slide-width {
    0% {width:50px}
    100% {width:100px}
}
@keyframes slide-width {
    0% {width:50px}
    100% {width:100px}
}

关键帧代码看起来像这个动画是什么？

2 个答案: