CSS3动画学习，用纯CSS来开发自己想要的动画效果

上一篇 文章整理了11个开源的加载动画，这一篇来学习一下动画属性的意思跟用法

知其然知其所以然

动画属性

css3中动画属性有

• animate-name 动画名
• animate-duration 动画持续时间
• animate-delay 延时执行动画时间
• animate-direction 动画执行方向
• animation-fill-mode 动画填充模式
• animation-iteration-count 动画执行次数
• animation-play-state 动画播放状态，指定动画播放还是暂停 [paused, running]
• animation-timing-function 指定动画的播放时从一个状态过滤到另一个状态的速度曲线

上面这些动画属性也可以直接使用 animate 属性来简写，类似于 background 属性，属性后面参数意思的顺序分别是

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animate-direction 取值

animation-fill-mode 取值

animation-iteration-count 表示动画执行次数，可填1,2,3,4…这些数字，表示执行1次，2次…，也可以填 infinite 表示无限次

如果指定只执行固定次数的话，比如 animation-iteration-count: 2; 那么动画在执行2次后，会停留在最后一桢

如果想让动画执行完后就停留在最后一桢，可以将 animation-fill-mode 设置为 forwards ，就会停留在最后一桢

原链文接： https://tomoya92.github.io/2019/04/04/css-animation/

animation-timing-function 取值

动画实现

有了这些属性，但动画是怎么展示的，还是要自己来写的

实现动画要用到一个关键字 @keyframes ，在这个关键字后跟着动画名，然后通过百分比来实现动画在不同时刻的效果，如下

div.box {
  width: 200px;
  height: 200px;
  animate-name: myanimate;
  animate-duration: 4s;
}
@keyframes myanimate {
  0% {background-color: #111;}
  25% {background-color: #222;}
  50% {background-color: #333;}
  100% {background-color: #444;}
}

这就实现了一个简单的动画，意思是 在4s内，动画被分成了4种状态，每一种状态对应1s，在第1s时，div.box的背景色是#111，第2s时背景色是#222...

除了百分比实现动画效果，还可以使用 from to 来实现，它俩对应百分比中的 0% 100% ，这种当然没有百分比定义的细致

它们还可以混合着用，如上面动画可以被改成

@keyframes myanimate {
  from {background-color: #111;}
  25% {background-color: #222;}
  50% {background-color: #333;}
  to {background-color: #444;}
}

总结

属性都过一遍后，感觉css3的动画还是挺简单的

参考

• https://www.w3schools.com/cssreF/css3_pr_animation.asp
• https://www.youtube.com/watch?v=zHUpx90NerM

写博客不易，转载请保留原文链接，谢谢!

原文链接: