动画：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{ 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>