css3动画可以分为两种:过渡动画、关键帧动画
一、过渡动画(transition)
过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形(transform)等这些属性。css过渡动画只能定义首位两个状态,所以是最简单的一种动画。
要想使用一个元素产生过渡动画,用transition属性定义动画的参数有:
transition-property:规定对哪个属性进行过渡
trsnsition-duration:定义过渡的时间,默认是0
transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出,默认是ease
transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0
.animate-div{
transition-property: width;/*对宽度进行过渡*/
transition-duration: 3s;/*过度时间为3s*/
transition-timing-function: ease;/*缓动效果为ease*/
transition-delay: 3s;/*延迟3s后才开始过渡*/
}
简写
.animate-div{transition: width 3s ease 3s;}
如是使用属性的默认值,则可以省略
.animate-div{transition: width 3s;}
相当于
.animate-div{transition: width 3s ease 0;}
如果想要同时使用多个属性,可以使用逗号隔开
.animate-div{transition: width 3s, height 3s, background-color 3s;}
使用transition属性只是规定了要如何去过渡,想要让动画发生,还得要有元素状态的改变。如何改变元素状态呢,即在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时的状态。
二、关键帧动画(keyframes)
关键帧动画不同于过度动画只能定义首位两个状态,他可以定义多个状态,进而实现更复杂的动画效果。
关键帧动画使用一个关键字@keyframes来定义动画。具体格式为:
@keyframes 动画名称{
时间点{元素状态}
时间点{元素状态}
......
}
参数:
只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。
为了兼容浏览器,还需加上各大浏览器的私有前缀