【第二屏】 1、小火箭要有抖动效果。建议：用animation动画：
这个动画加了，如何不破坏原有的动画？
.screen-2__wrap__heading{
transition: all 1s;
}
.screen-2__wrap__border,
.screen-2__wrap__subheading,
.screen-2__wrap__man{
transition: all 1s .5s;
}
.screen-2__wrap__roket{
transition: all .5s 1.5s;
animation: bounceInUp 1s 1.5s;
}
.screen-2__wrap__heading_animate_init,
.screen-2__wrap__border_animate_init,
.screen-2__wrap__subheading_animate_init
,.screen-2__wrap__roket_animate_init
{
opacity: 0;
transform: translate(0, 100%);
}
.screen-2__wrap__man_animate_init{
opacity: 0;
}
.screen-2__wrap__heading_animate_done,
.screen-2__wrap__border_animate_done,
.screen-2__wrap__subheading_animate_done
,.screen-2__wrap_roket_animate_done
{
opacity: 1;
transform: translate(0,0);
}
.screen-2__wrap__man_animate_done{
opacity: 1;
}
/* .screen-2__wrap__roket_animate_bounceInUp{
} */
/* 小火箭抖动动画 */
@keyframes bounceInUp{
0% {
opacity: 0;
transform: translate(0, 100%);
}
60% {
opacity: 1;
transform: translate(0, -20px);
}
75% {
transform: translate(0, 10px);
}
90% {
transform: translate(0, -5px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}<div class="screen-2"> <div class="screen-2__wrap"> <h2 class="screen-2__wrap__heading screen-2__wrap__heading_animate_init">每门课都是真实案例</h2> <div class="screen-2__wrap__border screen-2__wrap__border_animate_init"></div> <h3 class="screen-2__wrap__subheading screen-2__wrap__subheading_animate_init">真实案例，真实场景，在实战中实践、操作、调试<br/>大牛带你体验BAT真实开发流程，所有开发过程意义为你呈现</h3> <div class="screen-2__wrap__man screen-2__wrap__man_animate_init"></div> <div class="screen-2__wrap__roket screen-2__wrap__roket_animate_init"></div> </div> </div>
'.screen-2' : [ '.screen-2__wrap__heading', '.screen-2__wrap__border', '.screen-2__wrap__subheading', '.screen-2__wrap__man', '.screen-2__wrap__roket', ],
11
收起
正在回答
3回答
同学你好，过渡的0.5并不是从init到done哦，这个是js中替换的类名，而过渡是作用于这个元素的属性的哦。比如说opacity属性。
而且这个时间不是累加的哦。所以动画完成的时间还是设置animation中设置的时间。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星