本文简单介绍了介绍CSS动画的两大组成部分,即transition和animation,介绍比较简单,可以迅速了解有关于CSS动画的全貌。
一、Transition0 1简介在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。
比如以下这段代码:
img{
height:15px;
width:15px;
}
img:hover{
height: 450px;
width: 450px;
}
当鼠标悬浮在图片上时,这张图片会在一瞬间变大,这样的效果在网页中并不美观,会显得非常突兀,transition的出现解决了这个问题,它的作用就是指定状态变化的时间。我们只需要添加一行代码,就可以让动画在指定时间内完成,如下所示:
img{
transition: 1s;
height:15px;
width:15px;
}
img:hover{
transition: 1s;
height: 450px;
width: 450px;
}
这行的代码的意思是让图片的悬浮放大效果用一秒钟的时间来完成。
此外,我们还可以指定transition只适用于某个属性,如height:
img{
transition: 1s height;
}
这样一来,鼠标悬浮时就只有高度height的变化需要一秒钟,而宽度width的变化依然是瞬间完成。
0 2delay的用法在同一行transition语句中可以指定多个属性:
img{
transition: 1s height 1s width;
}
但是这样一来的话,width和height的变化依然是同时进行的,和不指定时的transition:1s;并没有任何区别,假如我们希望让heig