[CSS]画像をふわふわさせるフローティングアニメーション

この前ドラえもんが浮いてるのを見て合ってるなと

コードはそこからパクってきたわけではないですが

HTML

   <div class="floating">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LBYWOQnPDoF2PkqAvvxBzOJyrn3JkhU4JVQso-rXAlZa1CJ_4LeekGppdjRrmKdQHTSiknbs8X_PimAjQqqVsTZJWPOFBhYjWeK-ThnjWE3LNmui_txLaeKhMRoQk_VW2J1sHUNvBfiq7JuZWwKWilOsvZBANAGZzEf4jZXfJfCguOMrNtqj8r9LnSat/s0/my-melody-flying.png" style="max-width:100%">
    </div>

CSS

.floating {  
  position: fixed;
  right: 0%;
  top: 0px;
  width: 250px;
  z-index: 33;

  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

*位置は要調整

結果

右上の方に出ているはず