简单的摇摆动画

Posted 2021-03-15 wuzhaoyu

        
        .animated {
          animation-duration: 2s; /*动画时间*/
          animation-fill-mode: both; /*播放后的状态*/
        }
         
        .animated {
          animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
        }
         
        .animated {
          animation-duration: 2s; /*动画时间*/
        }
         
        .up,.around {    
          padding: 20px;
          margin: 20px auto;
          font-family: "微软雅黑";
          font-size: 40px;
          color: white;
          text-align: center;
          line-height: 90%;
        }
        .around{
        }
         
        .up{
          animation-name:upAnimation; /*动画的名称*/
          transform-origin: center bottom; /*设置动画旋转元素的基点为*/
          cursor: pointer;
        }
        .around{
          animation-name:aroundAnimation; /*动画的名称*/
          transform-origin: center bottom; /*设置动画旋转元素的基点为*/
          cursor: pointer;
        }
         
        @@keyframes upAnimation{
          0%,
          100%,
          20%,
          50%,
          80% {
          transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
          transform: translate3d(0,0,0);
          }
          40%,
          43%{
          transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
          transform: translate3d(0,-30px,0);
          }
          70%{
          transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
          transform: translate3d(0,-15px,0);
          }
          90%{
          transform: translate3d(0,-4px,0);
          }
        }
         
        @@keyframes aroundAnimation{
          0%,
          100%,
          20%,
          50%,
          80% {
          transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
          transform: translate3d(0,0,0);
          }
          40%,
          43%{
          transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
          transform: translate3d(-20px,0,,0);
          }
          70%{
          transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
          transform: translate3d(-10px,0px,0);
          }
          90%{
          transform: translate3d(20px,0,0);
          }
        }

<div class="up animated">上下晃动</div>
<div class="around animated">左右晃动</div>