css 鼠标悬浮样式_CSS动画——Transition和Animation

本文简单介绍了介绍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