CSS3动画 水平来回翻转
Demo
Code
<code>
.spin {
-webkit-animation: spin 1.5s linear 0s infinite normal;
-moz-animation: spin 1.5s linear 0s infinite normal;
-o-animation: spin 1.5s linear 0s infinite normal;
animation: spin 1.5s linear 0s infinite normal;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(360deg); }
}
@-o-keyframes spin {
from { -o-transform: rotateY(0deg); }
to { -o-transform: rotateY(360deg); }
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</code>
.spin {
-webkit-animation: spin 1.5s linear 0s infinite normal;
-moz-animation: spin 1.5s linear 0s infinite normal;
-o-animation: spin 1.5s linear 0s infinite normal;
animation: spin 1.5s linear 0s infinite normal;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(360deg); }
}
@-o-keyframes spin {
from { -o-transform: rotateY(0deg); }
to { -o-transform: rotateY(360deg); }
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</code>