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) 自己定义值。