3.7 动画 - 《HTML5 CSS3》

<style>
        @keyframes move{
        /* 开始状态 */
        0%{
            transform: translateX(0px);
        }
       /* 结束状态 */
        100%{
            transform: translateX(1000px);
        }
    }
    div{
        width: 200px;
        height: 200px;
        background-color: green;
        /* 调用动画 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 2s;
    }
</style>
<body>
    <div></div>
</body>

<style>
        @keyframes move{
        /* 开始状态 */
        from{
            transform: translate(0,0);
        }
       /* 结束状态 */
        to{
            transform: translate(1000px,0);
        }
    }

    div{
        width: 200px;
        height: 200px;
        background-color: green;
        /* 调用动画 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 2s;
    }
</style>
<body>
    <div></div>
</body>

多个动画的变化

    /* 1.可以做多个状态的变化keyframes 关键帧
    2.里面的百分比要是整数
    3.里面的百分比就是 总的时间的划分 */
<style>
    @keyframes move{
        0%{
            transform: translate(0,0);
        }
        25%{
            transform: translate(1000px,0);
        }
        50%{
            transform: translate(1000px,1000px);
        }
        75%{
            transform: translate(0,1000px);
        }
        100%{
            transform: translate(0,0);
        }
    }
    div{
        width: 200px;
        height: 200px;
        background-color: green;
        animation-name: move;
        animation-duration: 8s;
    }

</style>
<body>
    <div></div>
</body>

动画属性

简写

速度曲线

<style>
    div{
        font-size: 20px;
        /* 强行让文字在一行显示 */
        white-space: nowrap;
        overflow: hidden;
        width: 0px;
        height: 30px;
        background-color: green;
        animation-name: h;
        animation-timing-function: linear;
        animation-timing-function: steps(10);
        animation-duration: 4s;
         /* 规定动画结束后保持状态 */
        animation-fill-mode: forwards;
    }
    @keyframes h{
        0%{
            width: 0px;
        }
        100%{
            width: 200px;
        }
    }
</style>
<body>
    <div>世纪佳缘我在这里等你</div>
</body>