animation旋转动效
HTML代码:
<div class="rotationXZ bc"></div>
CSS代码
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* 暂停效果 */
.rotationXZ:hover {
animation-play-state: paused;
}
.rotationXZ {
width: 200px;
height: 200px;
margin: 35px auto;
background: #439;
-webkit-transform: rotate(360deg);
animation: rotation 40s linear infinite;
-moz-animation: rotation 40s linear infinite;
-webkit-animation: rotation 40s linear infinite;
-o-animation: rotation 40s linear infinite;
}