淺談CSS3動畫

木偶--吳康康發表於2020-12-14
CSSS3動畫

前言:特效無疑是炫酷的一個東西,很多網頁中都存在這種特效,這也就是我們今天要看的動畫.

目錄:

一.動畫

所謂的動畫是使元素從一種樣式逐漸變化為另一種樣式的效果,就是通過CSS程式碼來對我們需要產生特效的元素的樣式進行修改。我們會使用到keyframes來進行動畫的操作。

二.keyframes

1.定義：

keyframes:關鍵幀;格式為:@keyframes animationname {keyframes-selector {css-styles;}}(animationname為動畫起的名稱,是必需的),在一個 @keyframes 程式碼塊裡，包含著一系列的CSS規則，統稱為 keyframes。 一個 keyframe 定義了一個完整動畫裡某一時刻的一種動畫樣式。動畫繪製引擎會連貫平滑的實現各種樣式間的轉換。我們的狀態有:一個是動畫的起始狀態( “from” 程式碼塊) 和終止狀態 ( “to” 程式碼塊)或者可以定義百分比來進行動畫,0%-100%之間的數值（from為0%，to為100%）,某一個百分比之間的css樣式就會在某一過程進行執行。

 @keyframes name{
 			 from{}
			 to{}
}

或者

 @keyframes name{
 			 0%{}
 			...%
			 100%{}
}

2.繫結事件（animation）：

當然我們定義好動畫後並沒有結束，我們需要給某一個元素進行動畫事件的繫結，否則這個動畫就只是個擺設而已，繫結動畫我們使用:animation。
animation：顧名思義為動畫的意思，其中的引數有：

引數解釋
name動畫名稱,是必需的
duration動畫時間,是必需的
timing-function運動曲線,有linear、ease、ease-in、ease-ou、ease-in-out、steps（）（步長）
delay動畫開始的時間
iteration-count播放次數，有infinite（無限迴圈）
direction是否反向：alternate-reverse（倒著播放）
fill-mode起始與結束狀態
play-state播放與暫停

分開寫法：

    animation-name: ;
    animation-duration: ;
    animation-delay: ;
    animation-iteration-count: ;
    animation-direction: ;
    animation-timing-function: ;
    animation-play-state: ;
    animation-fill-mode: ;

3.複合寫法：

annimation:name durtaion timing-function delay iteration-count direction fill-mode play-state;

我們需要注意的一點就是:在動畫中name(動畫名稱)和durtaion(時間)是必需的。

三.舉例

我們實現一個div圍繞螢幕一週移動的效果:
程式碼:

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: move 3s linear infinite;
        }
        
        @keyframes move {
            0% {
                background-color: greenyellow;
            }
            25% {
                transform: translate(1000px, 0);
                background-color: bisque;
            }
            50% {
                transform: translate(1000px, 500px);
                background-color: khaki;
            }
            75% {
                transform: translate(0, 500px);
                background-color: skyblue;
            }
            100% {
                transform: translate(0, 0);
                background-color: cadetblue;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果圖:
在這裡插入圖片描述

相關文章