本文介绍如何在HTML页面中使用CSS3实现多个动画同时加载和无缝切换。通过示例代码展示了如何利用`animation`和`transition`属性来控制动画顺序和效果，避免了使用事件监听来切换动画的复杂性。最后，作者提到未来博客内容将更注重分享思路和实用技巧。
最近在做H5，遇到这样的需求(如题)
先上一部分代码：
.cur .p1d1d4{
width: 3rem;
margin: 2rem 5.3rem 0 0;
-webkit-animation: p1d1d4 1s ease-out;
animation: p1d1d4 1s ease-out;
}
@keyframes p1d1d4 {
0% {
margin: 2rem 10rem 0 0;
}
100% {
margin: 2rem 5.3rem 0 0;
}
}
@-webkit-keyframes p1d1d4{
0% {
margin: 2rem 10rem 0 0;
}
100% {
margin: 2rem 5.3rem 0 0;
}
正常情况下基本思路是：
监听webkitAnimationEnd动画结束以后再add另一个class
1 document.querySelector('.p1d1d4').addEventListener("webkitAnimationEnd", function(e){
2 this.classList.add('p1d1d4Scale')
3 })
这样的话两个 动画连接在一起(自己脑补效果)，但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终保留在p1d1
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
