动画的使用

过度只能是两个状态之间的转换

动画可以实现多个状态的变化过程

定义动画写发( 一 ):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 30px;
                background-color: deeppink;
                animation: big 1s; /*使用big这个动画 1s是在1秒内显示完成这个动画*/
            }
           
            /*定义一个动画叫big*/
            @keyframes big{
                from{
                    width: 0px;
                }
                to{
                    width: 100px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box"> 
            
        </div>
    </body>
</html>

定义动画写发( 二 ):

百分比指的是动画播放总时长的占比,定义一个动画1s播放完成50%就是占0.5s播放

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                background-color: antiquewhite;
                animation: big 5s;
            }
            @keyframes big {
                0%{
                    width: 30px;
                    height: 30px;
                    background-color: aqua;
                }
                10%{
                    width: 20px;
                    height:20px;
                    background-color: black;
                }
                100%{
                    width: 300px;
                    height: 300px;
                    background-color: antiquewhite;
                    }
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
    </body>
</html>

您可能还喜欢...