CSS动画

使用动画让元素动起来：

CSS动画源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk" />
    <title>test</title>
    <style>
        .animated {
          animation-duration: 1s; /*动画时间*/
          animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
          animation-fill-mode: both; /*播放后的状态,none=不改变默认行为;forwards=保持最后一个属性值（在最后一个关键帧中定义）;backwards=animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）;both    向前和向后填充模式都被应用。*/          
        }
        .animated-up{
            animation-name:keyframes-move-up; /*动画的名称*/
        }
        .animated-right{
            animation-name:keyframes-move-right; /*动画的名称*/
        }
        .box {
          background: rgba(45,151,219,.8);
          padding: 5px;
          color: white;
          text-align: center;
          margin:5px;
        }
        .box:hover{
          animation-play-state:paused;/*停止晃动*/
          -webkit-animation-play-state:paused;
          cursor: pointer;
        }     
        /**上下晃动动画**/
        @keyframes keyframes-move-up{
          0%,
          100%,
          20%,
          50%,
          80% {
            transform: translate3d(0,0,0); 
          }
          40%{
            transform: translate3d(0,-8px,0);
          }
          70%{
            transform: translate3d(0,-6px,0);
          }
          90%{
            transform: translate3d(0,-4px,0);
          }
        }
        /**左右晃动动画**/
        @keyframes keyframes-move-right{
          0%,
          100%,
          20%,
          50%,
          80% {
            transform: translate3d(0,0,0); 
          }
          40%{
            transform: translate3d(8px,0,0);
          }
          70%{
            transform: translate3d(6px,0,0);
          }
          90%{
            transform: translate3d(4px,0,0);
          }
        }
    </style>
</head>
<body >
    <div class="box animated animated-up">上下晃动</div>
    <div class="box animated animated-right">左右晃动</div>
</body>
</html>

 

posted @ 2018-03-30 10:21  迢迢  阅读(153)  评论(0)  编辑  收藏  举报