css3动画主要包含两个知识点:
1是css过渡(transition) 2是css动画(animation)1.transition,css过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容:1,指定要添加效果的css属性,2.指定效果的持续时间。
test 注意:该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。
鼠标移动到 div 元素上,查看过渡效果。
注意:transition后面跟的属性就是要变化的属性。
2.animation。要创建css3,必须先了解@keyframes规则。@keyframes作用就是创建动画,可以指定一个css样式和动画逐步从目前的样式更改为新的样式。@keyfragmes里没有时间秒的概念,只有百分比的概念,0%就是动画的开始,100%就是动画的结束,动画可以设置播放次数,默认是1次。即播放完一次动画就停止。写完@keyframes接下来就是用animation去调用keyframes了。
使用例子:
test 注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。