animation.css中jello动画用css写出树枝抖动的动画代码

效果为：

树枝

html:

<div class="background-tree">
  <div class="tree-left"></div>
  <div class="tree-right"></div>
</div>

css（url中的图片放自己的图片，随之修改@keyframe中的数值，就可以实现想要的效果） 

.background-tree {
  overflow: hidden;

  .tree-left {
    position: absolute;
    left: -16vw;
    top: 34vw;
    width: 39.2vw;
    height: 38.27vw;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100%;
    animation-name: jello;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -1;
  }

  @keyframes jello {

    from,
    11.1%,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    44.4% {
      -webkit-transform: skewY(-1.125deg);
      transform: skewY(-1.125deg);
    }

    55.5% {
      -webkit-transform: skewY(0.5625deg);
      transform: skewY(0.5625deg);
    }

    66.6% {
      -webkit-transform: skewY(-0.78125deg);
      transform: skewY(-0.78125deg);
    }

    77.7% {
      -webkit-transform: skewY(0.890625deg);
      transform: skewY(0.890625deg);
    }

    88.8% {
      -webkit-transform: skewY(-0.1953125deg);
      transform: skewY(-0.1953125deg);
    }

  }

  .tree-right {
    position: absolute;
    right: -3vw;
    top: 27vw;
    width: 32.27vw;
    height: 31.47vw;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100%;
    animation-name: jello;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: linear;
    z-index: -1;
  }
}