动画没有效果,不知道什么原因?
#music > img.play{
-webkit-animation: music_disc 4s linear infinite;
-moz-animation: music_disc 4s linear infinite;
-ms-animation: music_disc 4s linear infinite;
-o-animation: music_disc 4s linear infinite;
animation: music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc{
%0{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
%100{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes music_disc{
%0{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
%100{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
html:
<div id="music">
<img src="img/music_pointer.png">
<img class="play" src="img/music_disc.png">
</div>