怎么样才能只定义一次@keyframes就能实现动画效果

在css3图片切换特效的作业中，@keyframes我定义了五次再配合相应的animation实现了五朵白云的动画，怎么样才能只定义一次@keyframes就能实现动画效果，想了半天还是没头绪

十天是bug 2017-03-21

源自：CSS3图片切换特效 4-2 作业题

57

收起

1回答

小于飞飞回答被采纳获得+3积分 2017-03-21 17:13:04

你好，定义五次也可以，来具体确定不同云的不同位置，也可以定义一次@keyframes，云的起始位置和结束位置一样，通过animation给每多云设置不同参数，如运动的时间不同，就会形成云运动的前后顺序不同。希望对你有帮助，祝学习愉快。

十天是bug 提问者 #1

作业中要求每朵云的运动周期都不同，那这样的话每朵云的动画就都不一样啊，动画名自然也不能一样了，那么@keyframes怎么能只定义一次呢？请老师再解答一下，我就这里想不通

2017-03-21 19:58:28
小于飞飞回复提问者十天是bug #2

运动周期可以理解为每朵云的运动时间不同，如@keyframes是一样的关键帧动画，因为运动的时间不同，云就会出现运动的速度不一样，如有疑问多多交流，会帮助解决。祝学习愉快。

2017-03-22 12:38:11
十天是bug 提问者 #3

非常感谢！

2017-03-22 12:56:54

相似问题

云的动画效果

小飞机的效果怎么实现？好像不是一次动画，而是移动好几次，麻烦提供下思路

什么时候用过渡，什么时候用动画

我是用css的动画来实现左右切换图片的。但是按照这个思路后边有点没思路了，请教

老师单单这段代码是不是只能将元素设置init动画，

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载