css3-动画（animation）：
具有以下属性：
1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值：paused 指定暂停动画 ； running 指定正在运行的动画，默认。
代码实例（以平移--translate为例说明动画的整个过程）：
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <style> .warp { height: 100px; width: 100px; border: 1px solid #eee; background-color: #21b4bb; animation-name: moves; animation-direction: alternate; animation-delay: 0.2s; animation-duration: 5s; animation-play-state: paused; animation-iteration-count: 3; /*以上可以简写成：*/ animation: moves 5s linear 0.2s 3; } @keyframes moves { /*动画名称自定义*/ 10% { background-color: #21b4bb; /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/ transform: translate(100px, 0); -ms-transform: translate(100px, 0); /*ie 9*/ -moz-transform: translate(100px, 0); /* firefox */ -webkit-transform: translate(100px, 0); /* safari 和 chrome */ -o-transform: translate(100px, 0); /* opera */ } 30% { background-color: #008000; /*时间点可以任意*/ transform: translate(100px, 100px); -ms-transform: translate(100px, 100px); /*ie 9*/ -moz-transform: translate(100px, 100px); /* firefox */ -webkit-transform: translate(100px, 100px); /* safari 和 chrome */ -o-transform: translate(100px, 100px); /* opera */ } 60% { background-color: #444444; /*时间点可以任意*/ transform: translate(0, 100px); -ms-transform: translate(0, 100px); /*ie 9*/ -moz-transform: translate(0, 100px); /* firefox */ -webkit-transform: translate(0, 100px); /* safari 和 chrome */ -o-transform: translate(0, 100px); /* opera */ } 100% { background-color: #70dbdb; /*时间点可以任意*/ transform: translate(0, 0); -ms-transform: translate(0, 0); /*ie 9*/ -moz-transform: translate(0, 0); /* firefox */ -webkit-transform: translate(0, 0); /* safari 和 chrome */ -o-transform: translate(0, 0); /* opera */ } } </style> </head> <body> <div class="warp"> </div> </body></html>
效果图：
以上就是css3-动画（animation）效果的实现的详细内容。