章节
问答
课签
笔记
评论
占位
占位

CSS3中设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwordsboth。其四个属性值对应效果如下:

属性值

效果

none

默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

例如:让动画停在最一帧处。代码如下:

 animation-fill-mode:forwards; 

任务

在CSS编辑器的第28行输入正确的代码,元素背景色从红色变成蓝色

?不会了怎么办

思考一下,我们刚讲过的 animation-fill-mode

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
@keyframes
    redToBlue{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 衡山有雪
评论里有解释:关于backwards和none的区别:backwards会在动画开始前显示动画的第一帧,例如当动画是在页面加载完成后5秒开始,动画是由红色渐变为绿色,而div本来的背景色是黑色。那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色,而设置none的话,前五秒会div会显示自己的背景色黑色。

最赞回答 / shawnwangFDU
forwards其实是在动画结束后一直保持最后一帧的属性;backwards是在动画开始之前有个delay时间,在delay时间的时候就把该元素的属性变成动画第一帧的属性,而不是保持原来的属性。比如动画是背景年华,原始是黑色背景,而动画第一帧从红色的开始,延迟2s,那么播放动画时,前面2s delay时间背景就已经变成红色了,而用none的时候就是保持黑色。both就是把forwards和backwards这两个结合起来。

最新回答 / 日月石
你的最后帧是什么颜色呢?有代码吗?forwards显示最后帧的状态

已采纳回答 / Qyizos
外面的DIV高度是300,里面的DIV高度是200。(300-200)/2,margin-top:50px;就可以垂直居中了。这个是比较简单的方法。

已采纳回答 / qq_自强不息_8
backwards不是决定最终样式的,它表示元素应用动画时是否立即应用动画的初始帧,forwards表示动画执行完后停止在最后一帧的位置,最后一帧是什么样式,结果就是什么样式,明白?

已采纳回答 / 小黍
初始帧是red,也就是动画进度为0%即from时,用none的话最后会回到初始帧样式,也就是最后会停留在红色状态

已采纳回答 / 牛察哈尔灿
你可以理解为假如你看视频,当视频播放完成后,播放器进度条上面的小圆点是回到初始位置还是停留在结尾。<...图片...><...图片...>

最新回答 / 慕移动9181930
没准老师也是跟LEO学的呢。。所以思路或许有雷同,不过老师能讲明白,最好,你说呢?我支持。。人的图层在翅膀图层前面就可以了

最新回答 / 深山小童
transition怎么设置多个,请教,个人感觉transition只是是从一种值过渡到另一种值。而animation可以在不同时间段设置不同的属性,更复杂一些。

最赞回答 / qq_莳萝泡菜_03359237
先提个问题,怎样查看animation-fill-mode中none和backwards的不一样。首先设置代码如下(添加一个div块,作为对比,并且改变div块相关属性,如默认的background背景色、动画延迟animation-delay、animation-fil...

最赞回答 / 蒋亮亮91
animation-delay: 5s;background:#000;你可以改下动画延迟时间,给div加个默认背景再试下none,forwards,backwards,both应该就明白了

已采纳回答 / wisik
图片设为容器的背景,属于容器的属性设置。渐变效果是不能赋给容器的属性的,只能赋给容器中的物体,(容器就是标签一类的)

已采纳回答 / finalfi
backwards时候,并非延迟不管用了,而是在应用第一帧之后,才延迟
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言