css3 同时加载两个动画_html/css_WEB-ITnose

最近在做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 })

这样的话两个 动画连接在一起（自己脑补效果），但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终保留在p1d1d4Scale的动画结束效果，如果想再次执行之前的效果的话，可能要把之前的class效果去掉然后再加上

但是我想在一个class中实现这个效果怎么实现呢

pasting

在这里我想到了transition

简单介绍一下这个属性
这个方法有4个属性

transition-property 指定缓动的属性

transition-duration 缓动的执行时间

transition-timing-function 缓动类型

transition-delay 在指定时间之后执行（延期执行）

说道这里大家应该就懂了

.cur .p1d1d4{
width: 3rem;
margin: 2rem 5.3rem 0 0;
-webkit-animation: p1d1d4 1s ease-out;
animation: p1d1d4 1s ease-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
transition: all 1s ease-out 2s;
-webkit-transition: all 1s ease-out 2s;
-moz-transition: all 1s ease-out 2s;
-o-transition: all 1s ease-out 2s;
-ms-transition: all 1s ease-out 2s;
}

动画结束之后2秒执行，分享到此结束

从今天起我打算随心一些写博客，可能会基本的分享思路和方案或者技巧，言外之意就是可能会很简短，我上次的随笔 react demo是真东西，可以直接上手项目，全局ES6写法 webpack打包加载 热加载 react-router 总之汇集了一个小的demo，欢迎关注