詳解css3系列：動畫@keyframes和Animation

時間 2019-11-08

標籤詳解 css3 css 系列動畫 keyframes animation 欄目 CSS 简体版

原文原文鏈接

贊助我以寫出更好的文章，give me a cup of coffee?css

2017最新最全前端面試題

在css3中，咱們能夠經過@keyframes建立關鍵幀動畫效果。咱們須要將@keyframes綁定到選擇器中，不然不會有效果出現。同時，咱們還需定義動畫時長和動畫名稱前端

語法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。

在css3中，咱們以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。其中，0% 是動畫的開始時間，100% 動畫的結束時間。css3

animation

另一個重要的屬性：animationgit

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：github

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

註釋：請始終規定 animation-duration 屬性，不然時長爲 0，就不會播放動畫了。面試

duration（持續的時間）segmentfault

語法：動畫

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

animation-name屬性主要是用來調用@keyframes定義好的動畫。spa

注:animation-name調用的動畫名須要和「@keyframes」定義的動畫名稱徹底一致（區分大小寫），若是不一致將不具備任何動畫效果。 .net

語法

animation-direction: normal|alternate;

值	描述
normal	默認值。動畫應該正常播放。
alternate	動畫應該輪流反向播放。

animation-timing-function 值:

代碼例子

<style type="text/css"> 
        @keyframes changeColor{
        0%{
            background: #675AB3;
        }
        20%{
            background:#C1E8FF;
        }
        40%{
            background:#A48992;
        }
        60%{
            background:#FFF900;
        }
        80%{
            background:#6D87A0;
        }
        100%{
            background: #FFB89A;
        }
    }
        div {
        width: 400px;
        height: 150px;
        background: #E7F0EF;
        color:black;
        margin: 50px auto;
    }
        div:hover {
            animation: changeColor 6s ease-in-out   .2s;
    }
    </style>
 </head>
 <body>
     <div>鼠標移動到我這裏，查看動畫效果</div>
 </body>