css动画animation

使用css可以实现一些网页动画，增加用户的体验，但是不要过度使用

@keyframes

keyframes其作用是定义帧动画，先定义再调用。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

        @keyframes roll{
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }

         @keyframes roll{
            0%{
                top: 130px;
                left: 130px;
            }
            25%{
                top: 130px;
                left: 260px;
            }
            50%{
                top: 260px;
                left: 260px;
            }
            75%{
                top: 260px;
                left: 130px;
            }
            100%{
                top: 130px;
                left: 130px;
            }
        }

---

animation

animation是一个简写属性，包含多个属性值

语法：animation: name duration timing-function delay iteration-count direction fill-mode;

          animation:动画名称 动画执行时间 [动画曲线 延迟时间 执行次数 是否反向执行 是否保留最后一帧] 

        其中[ ] 中的内容为可选项

• animation-name: 动画属性名
• animation-duration：动画持续时间
• animation-delay： 动画延迟时间
• animation-timing-function：动画速度曲线  linear匀速
• animation-iteration-count：定义循环次数  infinite是无限循环
• animation-direction：alternate 动画轮反向播放
• animation-play-state：动画状态        paused/running
• animation-fill-mode：forwards 保留最后一帧动画

         animation: roll 3s linear infinite ;

---

通过动画实现下图效果：

 

 

        <div class="bg">
            <div class="content"></div>
        </div>

        /* 定义关键帧动画 */
        @keyframes roll{
            /* 本案例利用定位实现 */
            from{
                left: -200px;
            }
            to{
                left: 0;
            }
        }
        .bg{
            width: 200px;
            height: 30px;
            border: 1px solid hotpink;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .bg .content{
            width: 200px;
            height: 30px;
            position: absolute;
            background-color: deeppink;
            /* animation:动画名称 动画执行时间 动画曲线 执行次数 */
            animation: roll 3s linear infinite ;
        }
        .bg .content:hover{
            /* 动画状态：pause悬停时暂停 */
            animation-play-state: paused;
        }