CSS3 animation

時間 2019-12-05

標籤 css3 css animation 欄目 CSS 简体版

原文原文鏈接

animation

關鍵幀——keyframes

關鍵幀的時間單位數字： 0% 25% 100%等
字符： from(0%)、 to(100%)
格式： @keyframes 動畫名稱 { 動畫狀態}

demo1以下

<style>
    @-webkit-keyframes move {
        0% {
            width: 100px;
        }
        100% {
            width: 500px;
        }
    }
    .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move;}
</style>
<body>
    <div class="box">
    </div>
</body>

若不寫0% 和 100%，則默認都爲初始設置的，demo以下

<style>
    @-webkit-keyframes move {
        50% {
            width: 500px;
        }
    }
    .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move ease infinite;}
</style>
<body>
    <div class="box">
    </div>
</body>

同時可添加動畫運動形式， linear（勻速）、ease（緩衝）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）、cubic-bezier（number、number、number、number）特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內，demo見上一個
animation-iteration-count，重複次數，可寫數值，若爲infinite表示無限次，demo見上一個
animation-delay，動畫延遲（只是第一次）
animation-direction屬性定義是否應該輪流反向播放動畫：normal（動畫正常播放）、alternate（動畫應該輪流反向播放）

讓動畫運動完以後停在某個位置，可在class中設置好結尾狀態，在0%的時候設置一個初始狀態，demo以下

<style>
    @-webkit-keyframes move {
        0% {
            width: 100px;
        }
        100% {
            width: 500px;
        }
    }
    .box {  height: 100px; background: red; }
    .move { -webkit-animation: 2s move; width: 500px;}
</style>
<body>
    <div class="box move">
    </div>
</body>

animation-play-state規定動畫正在運行仍是暫停，paused（動畫暫停）、running（動畫正在播放）
以上屬性，可分別加前綴 -moz-keyframes , -o-keyframes, keyframes, -webkit-keyframes來支持不一樣的瀏覽器

使用animation實現的無縫滾動

<style>
        @-webkit-keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: -500px;
            }
        }
        #wrap {width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden;}
        #list {position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 200%; -webkit-animation: 3s move infinite linear;}
        #list li {list-style: none; float: left; width: 98px; height: 98px; border: 1px solid #FFF; background: #000; color: #FFF; font-size: 98px; text-align: center;}
        #wrap:hover #list {-webkit-animation-play-state: paused;}
</style><body>
    <div id="wrap">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

相關標籤/搜索

animation

css3

model&animation

android.support.v4.animation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。