css3动画

css3动画主要包含两个知识点：
1是css过渡（transition）
2是css动画（animation）

1.transition，css过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容：1，指定要添加效果的css属性，2.指定效果的持续时间。

 





注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。



鼠标移动到 div 元素上，查看过渡效果。

注意：transition后面跟的属性就是要变化的属性。

2.animation。要创建css3，必须先了解@keyframes规则。@keyframes作用就是创建动画，可以指定一个css样式和动画逐步从目前的样式更改为新的样式。@keyfragmes里没有时间秒的概念，只有百分比的概念，0%就是动画的开始，100%就是动画的结束，动画可以设置播放次数，默认是1次。即播放完一次动画就停止。写完@keyframes接下来就是用animation去调用keyframes了。

使用例子：

 





注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。