1@-webkit-keyframes rotating /* Safari and Chrome */ {
2 from {
3 -webkit-transform: rotate(0deg);
4 -o-transform: rotate(0deg);
5 transform: rotate(0deg);
6 }
7 to {
8 -webkit-transform: rotate(360deg);
9 -o-transform: rotate(360deg);
10 transform: rotate(360deg);
11 }
12}
13@keyframes rotating {
14 from {
15 -ms-transform: rotate(0deg);
16 -moz-transform: rotate(0deg);
17 -webkit-transform: rotate(0deg);
18 -o-transform: rotate(0deg);
19 transform: rotate(0deg);
20 }
21 to {
22 -ms-transform: rotate(360deg);
23 -moz-transform: rotate(360deg);
24 -webkit-transform: rotate(360deg);
25 -o-transform: rotate(360deg);
26 transform: rotate(360deg);
27 }
28}
29.rotating {
30 -webkit-animation: rotating 2s linear infinite;
31 -moz-animation: rotating 2s linear infinite;
32 -ms-animation: rotating 2s linear infinite;
33 -o-animation: rotating 2s linear infinite;
34 animation: rotating 2s linear infinite;
35}
1<div
2 class="rotating"
3 style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
4 >Rotate</div>