小球来回滚动动画

动画效果

代码实现

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 动画