認識CSS3特性之動畫

時間 2019-11-19

標籤認識 css3 css 特性動畫欄目 CSS 简体版

原文原文鏈接

前端之HTML5，CSS3（五）

　　動畫(animation)

　　動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。css

　　動畫的屬性

基本語法：選擇器 {動畫名稱動畫持續時間動畫運動曲線動畫開始時間動畫播放次數動畫是否倒敘播放}。在設置動畫屬性以前，須要使用@keyframes 規則對動畫樣式進行設定，基本格式爲 @keyframes 動畫名稱 {from{樣式1;} to{樣式2;}}。設定@keyframes規則後，經過動畫名稱綁定到須要製做動畫的元素上，生成動畫。html

屬性	描述
@keyframes	規定動畫樣式
animation	動畫屬性連寫
animation-name	規定@keyframes動畫名稱
animation-duration	規定動畫完成一次播放花費的時間，默認爲0
animation-timing-function	規定動畫的時間速度曲線，默認爲ease
animation-delay	規定動畫開始播放時間，默認爲0
animation-iteration-count	規定動畫播放次數,默認爲1
animation-direction	規定動畫下一次播放是否倒敘播放，默認爲normal
animation-play-state	規定動畫狀態時運行或者暫停，默認爲running

　　@keyframes

　　規定動畫運動規則，聲明動畫內容，用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%，0% 是動畫的開始，100% 是動畫的完成。使用百分比能夠更加細化時間以及動畫樣式。前端

@keyframes my-animation {
            from {
                margin-left: 0;  /*開始在位置0*/
            }

            to {
                margin-left: 1000px; /*結束結束在橫向位置1000px*/
            }
        }
        /*或者*/
        @keyframes my-animation {
            0% {
                margin-left: 0; /*開始在位置0*/
            }
            25% {
                margin-left: 250px; /*1/4的播放時間在橫向位置250px*/
            }
            50% {
                margin-left: 500px; /*1/2的播放時間在橫向位置500px*/
            }
            75% {
                margin-left: 750px; /*3/4的播放時間在橫向位置750px*/
            }
            100% {
                margin-left: 1000px; /*結束時間在橫向位置1000px*/
            }
        }

　　animation

　　動畫屬性連寫，連寫順序爲：動畫名稱(animation-name) 動畫持續時間(animation-duration) 動畫運動曲線(animation-timing-function) 動畫開始時間(animation-delay) 動畫播放次數(animation-iteration-count) 動畫是否倒敘播放(animation-direction)。其中animation-name和animation-duration爲必須屬性，不能缺省，其餘屬性能夠沒必要要能夠省略。測試

　　animation-name

　　動畫名稱能夠自行設定，可是必定要注意聲明(@keyframes部分)和調用部分(animation部分)的動畫名稱一致。動畫

　　animation-duration

　　animation-duration 屬性定義動畫完成一個週期所須要的時間，以秒(s)或毫秒(ms)計。屬性值爲ns或者nms，其中n爲非負數，當n爲0時，無動畫效果。spa

　　animation-timing-function

　　動畫變化的速度曲線，屬性值有：linear(勻速)，ease(慢-快-慢)，ease-in(慢-快)，ease-out(快-慢)，ease-in-out(慢-快-慢)...code

　　animation-delay

　　定義動畫開始前等待的時間，以秒或毫秒計。可選屬性，默認時間爲0s開始。orm

　　animation-iteration-count

　　定義動畫的播放次數，默認爲1次。能夠設置屬性值爲infinite，表示播放無限次數。htm

　　animation-direction

　　定義是否應該輪流反向播放動畫，屬性值：normal(不倒序播放)，alternate(倒序播放)。注意，設置倒序播放時，動畫正序播放和倒序播放一遍，播放次數爲2。blog

　　animation-play-state

　　規定動畫正在運行仍是暫停，屬性值：running(播放狀態)，paused(暫停狀態)。通常在JS中使用該屬性，設定動畫播放或者暫停。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>動畫-測試</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            animation: move 2s ease 0s infinite alternate;
        }
        @keyframes move {
            from {
                margin-left: 0;
            }
            to {
                margin-left: 1000px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果自行測試。

相關標籤/搜索

每日一句

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