css3动画

  通过css3可以创建动画,取代一些动态图片和flash动画,比如做一个loading之类的。

  在css3中创建动画,需要使用@keyframe规则和animation属性,在规则里面具体写每一帧的样式效果。目前对@keyframe的浏览器支持情况是IE10及以上支持,Firefox和Opera支持,Chrome和Sarari需要加-webkit-前缀。

  animation包含了许多值,如名称(animation-name),持续时间(animation-duration),延时(animation-delay),动画的运动曲线(animation-timing-function),自动开始(animation-play-state),运行次数(animation-iteration-count),是否轮流反向播放(animation-directon),播放结束后的状态(animation-fill-mode)等,直接写animation是一个简写,包含了所有子属性。

比如要用在一个div上用一个动画效果:

div{

animation:<各个属性值>;  //兼容多个浏览器的时候,加前缀。

}

animation-timing-funcion规定了动画的运动曲线,包括以下值:

ease 缓慢开始,加速,减慢。默认值

linear 匀速

ease-in  低速开始

ease-out  低速结束

ease-in-out  低速开始和结束 

cubic-bezier(n,n,n,n)  自己定义值。

原文地址:https://www.cnblogs.com/lionisnotkitty/p/6037827.html