我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

新年要跟所有的烦恼说拜拜，今天我们利用CSS动画让兔子将我们的烦恼都踩走，兔子每跳一下，烦恼文字就少一个。

实现

布局

我们分为上下两部分，上面是兔子图片，下面是烦恼容器，根据自己的喜好布下局即可：

     * {
        margin: 0 auto;
        padding: 0;
      }
      .wrapper {
        padding-top: 20px;
        width: 500px;
        height: 500px;
        background: gainsboro;
      }

   <div class="wrapper">
      <div class="rabbit">
        <img src="./images/cuteRabbit.jpeg" alt="" />
      </div>
        <div class="brood-wrapper">
          <div class="brood-item">
            <h4 id="content">单身</h4>
          </div>
        </div>
    </div>

跳动的兔子

首先我们找到一个自己喜欢的兔子图片，设置好大小，利用translateY()让兔子'跳起来'然后‘踩下来’，在跳起来的同时我们利用scale()将图片缩小点达到一个视觉效果。

    @keyframes jump {
        0% {
          transform: scale(1);
        }
        75% {
          transform: translateY(-20px) scale(0.9);
        }
        100% {
          transform: translateY(0px) scale(1);
        }
      }

然后在显示‘烦恼’的容器中设置animation属性，我们将动画运动曲线属性设置为ease-in，让落下来的部分快一点，贴近下现实。

    .rabbit {
        width: 50px;
        height: 50px;
        animation: jump 2s 2s ease-in infinite;
      }

摇曳的文字

接下来我们实现摇曳的文字，通过rotate3d()达到旋转效果，同时设置旋转中心为transform-origin: top left; 摇曳后文字掉落部件，这部分我们利用translateY()与opacity()属性实现。动画过程我们分为4部分，让其摇曳两回尽可能达到逼真效果：

    .brood-item {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: hinge 2s 4s infinite;
        transform-origin: top left;
      }
    @keyframes hinge {
        0% {
          animation-timing-function: ease-in-out;
        }
        20%,
        60% {
          transform: rotate3d(0, 0, 1, 70deg);
          animation-timing-function: ease-in-out;
        }

        40%,
        80% {
          transform: rotate3d(0, 0, 1, 30deg);
          animation-timing-function: ease-in-out;
          opacity: 1;
        }
        100% {
          transform: translateY(50px);
          opacity: 0;
        }

最后利用setInterval去更换踩落的文字，写下一些烦恼，通过Math.random()随机显示一个。

    setInterval(()=>{
          const el = document.getElementById('content')
          el.innerText = ['单身','霉运','吃土','烦恼','人渣','生病','失眠','菜鸡','伤心','困难'][Math.floor(Math.random()*11)]
        },6000)

总结

在我们实现过程中要注意动画、定时器延迟秒数的设置，让动画之间关联起来，使整体效果更加真实。新一年，所有烦恼都会被我们甩掉。