css 動畫，css

css 動畫，css

css3動畫

 

@keyframes

規定動畫，必須定義動畫的名稱，動畫時間長度的百分比，一個或多個css樣式屬性

以百分比來規定改變發生的時間，或者通過關鍵詞"from"和"to"，等價於0%和100%

文法：@keyframes animationname {keyframes-selector {css-styles;}}

 

animation

是一個簡寫屬性，用於設定六個動畫屬性：

animation-name

規定@keyframes動畫的名稱

animation-duration

規定動畫完成一個周期所花費的秒或毫秒。預設是0

animation-timing-function

規定動畫的速度曲線，速度曲線用於使變化更為平滑

linear 動畫從頭到尾的速度是相同的

ease 預設。動畫以低速開始，然後加快，在結束前變慢

ease-in 動畫以低速開始

ease-out 動畫以低速結束

ease-in-out 動畫以低速開始和結束

cubic-bezier(n,n,n,n) 在cubic-bezier函數中自己的值。可能的值是從0到1的數值

animation-delay

規定動畫何時開始。預設是0

animation-iteration-count

規定動畫被播放的次數。預設是1

infinite 規定動畫應該無限次播放

animation-direction

規定動畫是否在下一周期逆向地播放

normal 預設值。動畫應該正常播放

alternate 動畫應該輪流反向播放

animation-play-state

規定動畫是否正在運行或暫停。預設是"running"

paused 規定動畫已暫停

running 規定動畫現正播放

animation-fill-mode

規定動畫在播放之前或之後，其動畫效果是否可見

none 不改變預設行為

forwards 當動畫完成後，保持最後一個屬性值(在最後一個主要畫面格中定義)

backwards 在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值(在第一個主要畫面格中定義)

both 向前和向後填充模式都被應用

<div> </div><style>    div{        width: 100px;         height: 100px;         background: red;         animation: demo 5s ease infinite;        position: relative;    }    @keyframes demo{        0%   {background:red; left:0px; top:0px;}        25%  {background:yellow; left:200px; top:0px; border-radius: 50%;}        50%  {background:blue; left:200px; top:200px; border-radius: 0%;}        75%  {background:green; left:0px; top:200px; border-radius: 50%;}        100% {background:red; left:0px; top:0px;}    }</style>

<div>    <p>目前主流瀏覽器chrome、safari、firefox、opera已經支援CSS3大部分功能了，IE10以後也開始全面支援CSS3了</p></div><style>    div{        margin: 0 auto;        width: 500px;        height: 35px;        overflow: hidden;        position: relative;    }    p{        width: 100000px;        position: absolute;        animation: divv 10s linear infinite;    }    @keyframes divv{        from{ left: 500px; }        to{ left: -800px; }    }</style>