老师，请教一下

我看到参考视频里，第二屏的火箭图片在设置升起动画之后，好像还会有从下到上的一个小小颤抖的效果，这个效果是怎么实现的呢？希望老师能给一个实现的思路。

慕村602346 2019-05-19

源自：宣传页项目 5-6 作业题

收起

2回答

好帮手慕慕子 2019-05-19 18:57:14

同学你好，可以单独给火箭添加一个动画样式哦

.screen-2__heading {
    transition: all 1s;
}
.screen-2__underline,
.screen-2__subheading {
    transition: all .5s 1s;
}
 
.screen-2__uncle {
    transition: all .1s 1s;
}
 
.screen-2__rocket {
    transition: all .5s 2.3s;
}
 
.screen-2__heading_animate_init,
.screen-2__underline_animate_init,
.screen-2__subheading_animate_init,
.screen-2__uncle_animate_init,
.screen-2__rocket_animate_init {
    opacity: 0;
    transform: translate(0, 100%);
}
.screen-2__heading_animate_done,
.screen-2__underline_animate_done,
.screen-2__subheading_animate_done,
.screen-2__uncle_animate_done {
    opacity: 1;
    transform: translate(0, 0);
}
// 单独为小火箭添加动画
.screen-2__rocket_animate_done {
    animation: rocket 2s ease-out;
}
/* 小火箭动画 */
@keyframes rocket {
    0% {
        transform: translate(0, 100%);
        opacity: 0;
    }
 
    70% {
        transform: translate(0, 100%);
        opacity: 0;
    }
 
    80% {
        transform: translate(0, 0);
        opacity: 1;
    }
 
    85% {
        transform: translate(0, 10%);
        opacity: 1;
    }
 
    90% {
        transform: translate(0, 0);
        opacity: 1;
    }
 
    95% {
        transform: translate(0, 5%);
        opacity: 1;
    }
 
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

因为只有同学的部分代码，你可以参考上面的代码，根据你的代码做适当的调整，实现效果

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

好帮手慕慕子 2019-05-19 17:27:11

同学你好，可以先使用定位将火箭隐藏在底部，然后通过动画设置bottom值让火箭在由从上到下出现，先到达最高点，最后在往下移动一定的距离，实现一个弹簧的效果。老师这里举个简单的例子

同学可以结合示例，自己下去练习一下，加深理解

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者慕村602346 #1

可是老师，如果我之前已经对这个火箭设置了动画效果，比如让火箭和第二屏的其余图片设置了动画，还可以再设置一个火箭的弹簧动画效果吗？下面是部分代码： /* 第二屏 */ .screen-2__heading { transition: all 1s; } .screen-2__underline, .screen-2__subheading { transition: all .5s 1s; } .screen-2__uncle { transition: all .1s 1s; } .screen-2__rocket { transition: all .5s 2.3s; } .screen-2__heading_animate_init, .screen-2__underline_animate_init, .screen-2__subheading_animate_init, .screen-2__uncle_animate_init, .screen-2__rocket_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-2__heading_animate_done, .screen-2__underline_animate_done, .screen-2__subheading_animate_done, .screen-2__uncle_animate_done, .screen-2__rocket_animate_done { opacity: 1; transform: translate(0, 0); }

2019-05-19 18:05:00