css3动画

参考网站

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);
  }
}