css3动画主要包含两个知识点：1是css过渡（transition） 2是css动画（animation）1.transition，css过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容：1，指定要添加效果的css属性，2.指定效果的持续时间。<!DOCTYPE html><html><head><meta charset=“utf-8”> <title>test</title><style> div{width:100px;height:100px;background:red;transition:background 2s;-webkit-transition:background 2s; /* Safari /}div:hover{background:green;}</style></head><body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠标移动到 div 元素上，查看过渡效果。</p></body></html>注意：transition后面跟的属性就是要变化的属性。 2.animation。要创建css3，必须先了解@keyframes规则。@keyframes作用就是创建动画，可以指定一个css样式和动画逐步从目前的样式更改为新的样式。@keyfragmes里没有时间秒的概念，只有百分比的概念，0%就是动画的开始，100%就是动画的结束，动画可以设置播放次数，默认是1次。即播放完一次动画就停止。写完@keyframes接下来就是用animation去调用keyframes了。使用例子：<!DOCTYPE html><html><head><meta charset=“utf-8”> <title>test</title><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s linear 2s infinite alternate;/ Firefox: /-moz-animation:myfirst 5s linear 2s infinite alternate;/ Safari and Chrome: /-webkit-animation:myfirst 5s linear 2s infinite alternate;/ Opera: /-o-animation:myfirst 5s linear 2s infinite alternate;}@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-moz-keyframes myfirst / Firefox /{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst / Safari and Chrome /{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-o-keyframes myfirst / Opera */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}</style></head><body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body></html>