这个动画的关键帧代码是什么样的？

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}
}