CSS animation 实现简单的往返飘动动画

此动画DOM结构为三张图片定位叠加。
然后添加动画名称animation-name(因图片往返幅度不一致没使用相同运动规则),
通过动画开始之前的延迟animation-delay,
达到上下交错浮动的视觉效果。

===============================================

<div class='wrap'>
  <img src="...">
  <img src="...">
  <img src="...">
<div>

.wrap{
  img{
    &:nth-child(1){
      animation:3s ease-in-out 1s infinite normal none running bRTaPl;
    }
    &:nth-child(2){
      animation:3s ease-in-out 0.66s infinite normal none running dwSZFG;
    }
    &:nth-child(3){
      animation:3s ease-in-out 0.33s infinite normal none running uvIwZ;
    }
  }
}

以上animation为复合写法，拆分出来就是：
    animation-duration: 3s;  //规定完成动画所花费的时间，以秒或毫秒计。
    animation-timing-function: ease-in-out;  //规定动画的速度曲线。
    animation-delay: 0.66s;  //规定在动画开始之前的延迟。
    animation-iteration-count: infinite; //规定动画应该播放的次数。n/infinite 次数/无限次播放
    animation-direction: normal; //规定是否应该轮流反向播放动画。
    animation-fill-mode: none; //规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    animation-play-state: running; //指定动画是否正在运行或已暂停。running/paused 运行/暂停
    animation-name: uvIwZ; //规定需要绑定到选择器的 keyframe 名称。


@keyframes bRTaPl{
  //动画规则
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(3px, 15px);
  } 
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes dwSZFG{
  //动画规则
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(5px, 10px);
  } 
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes uvIwZ {
  //动画规则
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(6px, 5px);
  } 
  100% {
    transform: translate(0px, 0px);
  }
}