小球来回滚动动画

动画效果

代码实现

html

<div class="ball">6</div>

css

.ball {
  width: 200px;
  height: 200px;
  line-height: 200px;
  border-radius: 50%;
  background-color: orange;
  font-size: 100px;
  text-align: center;
  cursor: pointer;
  animation-name: scroll;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* animation: scroll 2s linear 2s infinite alternate; 或者用这个简写属性表示上面6个属性 */
}

.ball:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(300px) rotate(720deg);
  }
}

animation 属性是一个简写属性,用于设置 6 个动画属性.

• animation-name: 要绑定到选择器上的keyframe名称
• animation-duration: 动画完成时间
• animation-timing-function: 动画速度曲线
• animation-delay: 动画开始之前的延迟时间
• animation-iteration-count: 动画播放次数
• animation-direction: 是否反向播放动画;

兼容性

IE9 及更早的版本不支持 animation 动画