css里slidebottom,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;