请问老师怎么设置动画的最初始状态
.c1 {
top: 6%;
left: 120%;
transform: scale(0.8);
opacity: 0.8;
animation: c1 20s linear infinite 2s;
}@keyframes c1{
0% {left: 100%;}
100% {left: -10%;}
}动画从最右边延迟两秒出来的，请问我怎么能让动画从页面中间开始滚动呢？
25
收起
正在回答
4回答
单独的一个动画播放会一直在它的初始位置重新播放 ,想要达到所说的效果 ,需要写两个动画 ,并结合js实现 ,如下:
css3定义两个动画效果:
使用js监控当第一个动画播放完毕 , 移除第一个动画并添加第二个动画:
完善一下吧 ,祝学习愉快 !
红尘万里难追妃子笑
2018-06-04 20:42:03
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sky&cloud</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="main"> <div class="sky"> <div class="cloud c1"></div> <div class="cloud c2"></div> <div class="cloud c3"></div> <div class="cloud c4"></div> <div class="cloud c5"></div> </div> <div class="glass"> <div class="rabbit"></div> </div> </div> </body> </html>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100vh;
}
.sky {
height: 60%;
background: -webkit-linear-gradient(rgb(196, 228, 253), transparent);
background: -moz-linear-gradient(rgb(196, 228, 253), transparent);
background: -o-linear-gradient(rgb(196, 228, 253), transparent);
background: linear-gradient(rgb(196, 228, 253), transparent);
overflow: hidden;
}
.glass {
height: 40%;
background: -webkit-linear-gradient(transparent, rgb(148, 190, 89));
background: -moz-linear-gradient(transparent, rgb(148, 190, 89));
background: -o-linear-gradient(transparent, rgb(148, 190, 89));
background: linear-gradient(transparent, rgb(148, 190, 89));
}
.cloud {
width: 153px;
height: 51px;
border-radius: 50px;
background-color: #fff;
position: relative;
}
.cloud::before {
content: '';
background-color: #fff;
position: absolute;
width: 60px;
height: 78px;
border-radius: 30px;
top: -20px;
left: 18px;
}
.cloud::after {
content: '';
background-color: #fff;
position: absolute;
width: 102px;
height: 100px;
border-radius: 50px;
top: -34px;
left: 37px;
}
.c1 {
top: 6%;
left: 120%;
transform: scale(0.8);
opacity: 0.8;
animation: c1 20s linear infinite 2s;
}
.c2 {
top: 15%;
left: 120%;
transform: scale(1.5);
opacity: 0.6;
animation: c2 10s linear infinite 4s;
}
.c3 {
top: 14%;
left: 35%;
transform: scale(0.8);
opacity: 0.9;
animation: c3 5s linear infinite 2s;
}
.c4 {
left: 66%;
top: 7%;
transform: scale(0.6);
opacity: 0.7;
animation: c4 18s linear infinite;
}
.c5 {
top: -25%;
left: 110%;
animation: c5 25s linear infinite 3s;
}
.rabbit {
background: url(../image/rabbit.png) no-repeat;
position: absolute;
bottom: 50px;
right: 200px;
width: 150px;
height: 150px;
background-size: 100%;
}
@keyframes c1{
0% {left: 100%;}
100% {left: -10%;}
}
@keyframes c2{
0% {left: 100%;}
100% {left: -10%;}
}
@keyframes c3{
0% {left: 100%;}
100% {left: -10%;}
}
@keyframes c4{
0% {left: 100%;}
100% {left: -10%;}
}
@keyframes c5{
0% {left: 100%;}
100% {left: -10%;}
}相似问题
想问一下关于动画前的姿态
8
1
3
both和forwards效果一样？？
34
0
3
css3动画延迟
217
1
6
云的动画效果
0
0
3
为什么开始载入页面的时候那些动画会先慢慢消失？
28
0
4
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星