请教一下作业的动画问题

首页课程实战体系课手记专栏慕课教程

请教一下作业的动画问题

来源：2-14 项目作业

迷失的小麦

2019-11-19 12:46:02

1.兔子动画我参考的别的同学，但是我看不懂（为什么z轴旋转和移动百分比会出效果）

2.云朵动画效果为什么出不来

我希望前三朵云实现云在图片中间，然后左移动至消失，然后从右边出现再左边消失的效果

后2多云从右往左移动至消失（如何设置循环，从消失至回位右边100%的位置）

目前我写的代码：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

</div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

*{margin: 0;padding: 0;}

/*sky*/

.sky{width: 100%;height: 510px;background: linear-gradient(rgb(196, 228, 253),white);position: relative;}

.cloud{width: 130px;height: 40px;border-radius: 20px;background-color: #ffffff;position: absolute;

animation-duration: 4s;animation-iteration-count: infinite;animation-timing-function: linear;}

.cloud::before{content: '';width: 70px;height: 40px;border-radius: 20px;background-color: #ffffff;transform: rotate(50deg);

position: absolute;top: -6px;left: 3px;}

.cloud::after{content: '';width: 75px;height: 75px;border-radius: 50%;background-color: #ffffff;position: absolute;

top: -29px;right: 12px;}

.cloud:nth-of-type(1){top: 200px;right: 50%; transform: scale(2);opacity: 0.9;animation: cloud1;}

.cloud:nth-of-type(2){top: 100px;right: 50%; transform: scale(1.2);opacity: 0.8;animation: cloud2;}

.cloud:nth-of-type(3){top: 300px;right: 50%; transform: scale(1.5);opacity: 0.7;animation: cloud3;}

.cloud:nth-of-type(4){top: 200px;left: 100%; transform: scale(1.2);opacity: 0.6;animation: cloud4;animation-delay: 2s;}

.cloud:nth-of-type(5){top: 200px;left: 100%; transform: scale(0.8);opacity: 1;animation: cloud5;animation-delay: 2s;}

/*云朵动画*/

@keyframes cloud1{

from{transform: translate(200px,-50%);}

to{transform: translate(200px,-2000px);}

}

@keyframes cloud2{

from{}

to{}

}

@keyframes cloud3{

from{}

to{}

}

@keyframes cloud4{

from{left: 100%;}

to{right: 100%;}

}

@keyframes cloud5{

from{left: 100%;}

to{right: 100%;}

}

/*grass*/

.grass{width: 100%;height: 450px;background: linear-gradient(white,rgb(148, 190, 89));position: relative;}

.grass::before{position: absolute;background: url("../img/rabbit.png") no-repeat center;background-size: 290px 290px;

content: '';width: 300px;height: 300px;right: 300px;bottom: 50px;animation:rabbit 8s linear infinite;}

/*兔子动画*/

@keyframes rabbit{

0%{transform:translate(0%,0px) rotateZ(0deg);}

10%{transform:translate(-15%,-10px) rotateZ(30deg);}

25%{transform:translate(-50%,-30px) rotateZ(10deg);}

40%{transform:translate(-85%,-10px) rotateZ(-10deg);}

50%{transform:translate(-100%,0px) rotateZ(0deg);}

}

写回答

1回答

好帮手慕慕子

2019-11-19

已采纳

同学你好，对于你的问题解答如下:

tanslate表示在水平和垂直方向移动元素， rotateZ表示在z轴上旋转元素。这段代码在动画帧@keyframes的不同帧下设置元素的移动距离和旋转角度都不同，实现兔子的动画效果。
如果同学对transform属性的使用不是很熟悉，可以回顾前面“CSS3转换”章节的课程，加深理解

这道作业题目不要求给兔子添加动画效果，同学自己完成作业的时候可以不用添加。
在动画帧中只能针对同一个属性设置不同的属性值，实现动画效果，你这里开始设置left属性，然后设置right属性，根本就不是同一个属性，所以无法实现效果
因为animation是做单周运动，无法实现环一周的效果（会出现从左边飞快滑向右边的bug），所以同学说的这种效果无法通过CSS实现
老师这里给同学提供一个参考思路：
（1）一开始给元素设置right:-100%; 让所有云朵都隐藏在窗口右侧
（2）设置一个动画帧让元素从最右侧移动到最左侧
（3）所有云朵使用同一个动画帧，通过控制动画的完成时间和延迟时间实现云朵的不同动画效果，简化代码书写的同时，也方便阅读
（4）注意：需要给最外层元素添加overflow：hidden;属性，超出隐藏，防止水平方向出现滚动条
参考代码：

以部分云朵为例，其他的云朵也是同样的修改思路