css3 同时加载两个动画

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

 document.querySelector('.p1d1d4').addEventListener("webkitAnimationEnd",      }) 

这样的话两个 动画连接在一起（自己脑补效果），但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终保留在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，欢迎关注