HTML連載72-動畫效果及其餘屬性

時間 2020-03-04

標籤 html 連載動畫效果其餘屬性欄目 HTML 简体版

原文原文鏈接

1、動畫效果html

1.過渡與動畫相相似，都須要三要素，那麼他們的區別在哪裏呢？git

答：過渡必須是人爲的觸發纔會執行動畫，動畫不須要人爲的觸發就能夠自動執行動畫。github

2.相同點：微信

（1）過分和動畫都是用來給元素添加動畫的；（2）過渡和動畫都是系統新增的一些屬性；（3）過渡和動畫都須要知足三要素纔會有動畫效果函數

3.動畫的三要素學習

（1）告訴系統須要執行哪一個動畫；大數據

 

animation-name:動畫名稱;

（2）告訴系統咱們須要本身建立一個自定義名稱的動畫動畫

@keyframs  動畫名稱{

    from{

    }

    to{

    }

}

（3）動畫持續的時長ui

 

animation:時間；/*這裏的時間可使用秒作單位*/

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width:100px;

            height: 50px;

            background-color: red;

           

            animation-name:lnj;

            animation-duration: 1s;

        }

        @keyframes lnj {

            from{

                margin-left:0;

            }

            to{

                margin-left:500px;

            }

        }

.........省略代碼........

<div></div>

2、動畫模塊其餘屬性spa

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration: 1s;

            animation-delay:1s;/*動畫執行前的延遲時間*/

            animation-timing-function:linear;/*動畫持續的速度函數類型*/

            animation-iteration-count:3;/*動畫執行的次數*/

            animation-direction:alternate;/*動畫執行循環往復，循環往復一次是算兩次動畫效果的，若是使用normal，那麼就是重複動畫而已，默認是此值*/

            animtion-play-state:running;/*默認是running,也就是執行動畫*/

        }

        @keyframes sport {

            from{

                margin-left:0px;

            }

            to{

                margin-left:500px;

            }

        }

        div:hover{

            /*告訴系統當前動畫是否須要暫停*/

            animation-play-state:paused;

        }

.........省略代碼.......

<div></div>

3、動畫效果其餘屬性下

經過咱們的觀察，動畫是有必定的狀態的

（1）等待狀態；（2）執行狀態；（3）結束狀態

 

animation-fill-mode:none;

屬性值有四種

none:不作任何的改變；

forwards:讓元素結束狀態保持動畫的最後一幀的樣式

backwards:讓元素等待狀態的時候顯示動畫的第一幀的樣式

both:兩個屬性值的效果都顯示。

    <style>

        *{

            padding:0;

            margin:0;

        }

        .box1{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration:2s;

        }

        @keyframes sport {/*這裏的百分比表明佔用的時間*/

            0%{

                margin-left:0px;

                margin-top:0px;

            }

            10%{

                margin-left: 300px;

                margin-top:0px;

            }

            20%{

                margin-left:300px;

                margin-top:300px;

            }

            30%{

                margin-left:0px;

                margin-top:300px;

            }

            100%{

                margin-left:0px;

                margin-top:0px;

            }

        }



        .box2{

            width: 100px;

            height: 50px;

            background-color: red;

            margin:100px auto;

            animation-name:sport2;

            animation-duration:2s;

            animation-fill-mode:backwards;

            animation-delay:2s;

        }

        @keyframes sport2 {

            0%{

                tranform:rotate(10deg);

            }

            25%{

                transform:rotate(45deg);

            }

            50%{

                transform:rotate(79deg);

            }

            100%{

                transform:rotate(160deg);

            }

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>