CSS动画基础运用

一.前言

简单概述一下css动画的基本用法.

二. 动画属性

三. 实际应用

• 示例1 动画持续五秒 由红变黄 最后转为红色

 .box {
        width: 200px;
        height: 200px;
        background: red;
        /*调用动画*/
        animation: myfirst 5s;
        /* Safari 与 Chrome */
        -webkit-animation: myfirst 5s;
    }
    //定义动画
    @keyframes myfirst {
        from {
            background: red;
        }

        to {
            background: yellow;
        }
    }

    @-webkit-keyframes myfirst{
        from {
            background: red;
        }

        to {
            background: yellow;
        }
    }

• 示例2 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

 @keyframes myfirst {
        0% {
            background: red;
        }

        25% {
            background: yellow;
        }

        50% {
            background: blue;
        }

        100% {
            background: green;
        }
    }

    @-webkit-keyframes myfirst{
        0% {
            background: red;
        }

        25% {
            background: yellow;
        }

        50% {
            background: blue;
        }

        100% {
            background: green;
        }
    }