CSS3动画animation动画：animation
animations这物似乎还是只在webkit，moz核心的浏览器上起作用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动画</title><style type="text/css">
@-moz-keyframes resize{0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(190, 206, 235, 0.2); } 100% { padding: 0 100px; background-color:rgba(190, 206, 235, 0.9); }} /* Safari 和 Chrome */ @-webkit-keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(190, 206, 235, 0.2); } 100% { padding: 0 100px; background-color:rgba(190, 206, 235, 0.9); }}.anim_box:hover { -moz-animation-name: resize;/*给动画起名字*/ -moz-animation-duration: 1.5s;/*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/ -moz-animation-iteration-count: 4;/*鼠标悬停时动画只执行4次。*/ -moz-animation-direction: alternate;/*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/ -moz-animation-timing-function: ease-in-out;/*规定动画的速度曲线。默认是 "ease"。*/ -webkit-animation-name: resize; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out;
}.test_box{ width:100px;height:100px; background-color:rgba(190, 206, 235, 1);border:1px solid black;}</style></head><body><div class="anim_box test_box"></div></body></html>