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

CSS3中设置动画播放方向

animation-direction属性主要用来设置动画播放方向,其语法规则如下:

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值:normalalternate

1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;

2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为:

animation-direction:alternate;

注意:Chrome或Safari浏览器,需要加入-webkit-前缀!

 

任务

在CSS编辑器第45行输入正确代码,将动画move播放方向设置为alternate。

注意:Chrome或Safari浏览器,需要加入-webkit-前缀!

?不会了怎么办

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

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

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / _在野
答案是 动画在奇数次向前播放,偶数次向反方向播放

最新回答 / 小鱼鱼同学
是挺可爱的 可能你更可爱

最新回答 / 秋山在此
可以自定义

最赞回答 / 静候飞鸟
因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但w3c制定标准,要走很复杂的程序,审查等。而浏览器商市场推广时间紧,如果一个属性已经够成熟了,就会在浏览器中加入支持。为避免日后w3c公布标准时有所变更,加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性。等到日后w3c公布了标准,border-radius的标准写法确立之后,再让新版的浏览器支持border-radi...

已采纳回答 / 呼哈帝
每次都会有的

最赞回答 / 神影天初
本来一开始方块的位置应该是在(0,0)坐标处,但是动画设置它0%的时候在(0,90)坐标处,这是瞬间完成的。至于删了为什么没有变化是因为在span里面也设置了初始坐标为(0,90),如果你把那个代码删了,再把0%的代码删了,你就看到变化了。

已采纳回答 / 螃蟹在剥谁的壳
假如你设置了一个顺时针的转360度的动画,如果加了animation-direction:alternation,那么第一次是顺时针旋转360度(第一次顺时针旋转是默认的),第二次则是逆时针旋转360度,第三次是顺时针,第四次则是逆时针了……那么就是”第偶数次向前播放,第奇数次向反方向播放“

最赞回答 / 天这样蓝
圆的是设置了border-radius吧

已采纳回答 / 慕仙1767075
animation-direction  本身就是一个属性,它有两个值,normal和alternate,normal就是每次动画都向前,alternate是偶数次向前,奇数次向后。alternate是一个值(value),默认的就是这样,不能改变。如果你想改变,只能用js或者jquery。

最新回答 / 神影天初
哪里是没什么影响啊!!!不设置成块你怎么设置宽高啊!!!

最赞回答 / mingling
alternate时,奇数次,从0%到100%播放,偶数次是100%到0%播放。慕课网中的偶次向前播放,意思就是从100%到0%的播放

最新回答 / lov1
如果你用canvas来做这个动画的话,可以每次moveto的时候顺便画一条线即可。

最新回答 / 神影天初
用脑壳想一想大家都知道是错的,毕竟第一次它就是正向的,第二次才是反向的,明显写错了而已。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言