CSS3 Animation 控制元素在动画的初始位置开始动画

当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。

解决方法：

使用animation-fill-mode:forwards属性

image

forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置

backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置

@keyframes slidebottom{
    0% {
        margin-top: 5rem;
        opacity: 0;
    }
    50% {
        margin-top: 2rem;
        opacity: .5;
    }
    100% {
        margin-top: 0rem;
        opacity: 1;
    }
}
.phone{
    position: relative;
    float: left;
    height: 3rem;
    width: 3rem;
    animation：slidebottom 1s linear 0.25s 1；
    animation-fill-mode：backwards;
}

上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。

js中赋值nimation-fill-mode:forwards的方法：

object.style.animationFillMode=none | forwards | backwards | both;