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

html-css015

CSS3 Animation 控制元素在动画的初始位置开始动画,第1张

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

解决方法:

使用animation-fill-mode:forwards属性

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

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

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

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

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

css3定位有很多种,这里是DIV实现的布局的话,举以下例子

<div id ="layout"><div/>

html标签是这样名字叫laypout

在CSS3文件中实现布局就是

#layout{ 写关于布局的一些属性}这样实现

布局会涉及一些继承的问题

所以还是要多点的写代码