参考网站
CSS3 @keyframes 规则 http://www.w3school.com.cn/cssref/pr_keyframes.asp
CSS3 animation 属性 http://www.w3school.com.cn/cssref/pr_animation.asp
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
CSS3 animation-play-state 属性 http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
.music-icon {
display: inline-block;
width: 40px;
height: 40px;
animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite; /* Firefox */
-webkit-animation: rotate 3s linear infinite; /* Safari and Chrome */
-o-animation: rotate 3s linear infinite; /* Opera */
background: url('./icon_mus.png') no-repeat center;
background-size: 40px;
}
.music-icon.stop {
animation-play-state: paused;
-webkit-animation-play-state: paused;
background: url('./icon_musx.png') no-repeat center;
background-size: 40px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-moz-keyframes rotate /* Firefox */ {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate /* Safari 和 Chrome */ {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes rotate /* Opera */ {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(0deg);
}
}