上一篇 文章整理了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 取值

描述
normal 默认值,正常方向
reverse 反向
alternate 首先向前播放,然后向后播放
alternate-reverse 首先向后播放,然后向前播放

animation-fill-mode 取值

描述
none 没有填充模式
forwards 元素将保留由最后一个关键帧设置的样式值(取决于animation-direction和animation-iteration-count)
backwards 元素将获取由第一个关键帧设置的样式值(取决于animation-direction),并在动画延迟期间保留此值
both 动画将遵循向前和向后的规则,在两个方向上扩展动画属性

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 取值

描述
linear 动画从头到尾具有相同的速度
ease 默认值。动画开始缓慢,然后快速,慢慢结束
ease-in 动画开始很慢
ease-out 动画结尾很慢
ease-in-out 动画开始结尾都很慢
ease-start 相当于 steps(1, start)
ease-end 相当于 steps(1, end)
steps(int, start, end) 指定带有两个参数的步进功能。第一个参数指定函数中的间隔数。它必须是正整数(大于0)。第二个参数是可选的,它是值“start”或“end”,并指定值在区间内发生变化的点。如果省略第二个参数,则给出值“end”
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值 可能的值是从0到1的数值

动画实现

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

实现动画要用到一个关键字 @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://tomoya92.github.io/2019/04/04/css-animation/