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