css動畫製做

時間 2019-12-07

標籤 css 動畫製做欄目 CSS 简体版

原文原文鏈接

深刻CSS3 動畫效果的總結詳解

CSS3添加了幾個動畫效果的屬性，經過設置這些屬性，能夠作出一些簡單的動畫效果而不須要再去借助JavaScript。CSS3動畫的屬性主要分爲三類：transform、transition以及animation。 css

transform

rotate html

設置元素順時針旋轉的角度，用法是： web

transform: rotate(x); 瀏覽器

參數x必須是以deg結尾的角度數或0，可爲負數表示反向。函數

scale 動畫

設置元素放大或縮小的倍數，用法包括： ui

transform: scale(a); 元素x和y方向均縮放a倍 spa

transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍 orm

transform: scaleX(a); 元素x方向縮放a倍，y方向不變 xml

transform: scaleY(b); 元素y方向縮放b倍，x方向不變

translate

設置元素的位移，用法爲：

transform: translate(a, b); 元素x方向位移a，y方向位移b

transform: translateX(a); 元素x方向位移a，y方向不變

transform: translateY(b); 元素y方向位移b，x方向不變

skew

設置元素傾斜的角度，用法包括：

transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b

transform: skewX(a); 元素x方向逆時針傾斜角度a，y方向不變

transform: skewY(b); 元素y方向順時針傾斜角度b，想方向不變

以上的參數均必須是以deg結尾的角度數或0，可爲負數表示反向。

matrix

設置元素的變形矩陣，由於矩陣變形過於複雜，暫略。

origin

設置元素的懸掛點，用法包括：

transform-origin: a b; 元素的懸掛點爲(a, b)

元素的懸掛點即爲它旋轉和傾斜時的中心點。取值中的a、b能夠是長度值、以%結尾的百分比或者left、top、right、bottom四個值。

transition

transition-property

指定transition效果做用的CSS屬性，其值是CSS屬性名。

transition-duration

動畫效果持續的時間，其值爲以s結尾的秒數。

transition-timing-function

指定元素狀態的變化速率函數，其取值基於貝賽爾曲線函數，詳情以下所示：

transition-delay

動畫效果推遲開始執行的時間，其值爲以s結尾的秒數。

CSS3動畫的生命週期以下圖所示，從中能夠清楚的看出duration和delay之間的關係：

animation

CSS3中真正的動畫屬性是animation，而前面的transform和transition都只是對DOM元素的變形或者是狀態的過渡。實際上，CSS3所支持的動畫效果只是填充動畫，也就是說先設定整個動畫生命週期中的幾個關鍵狀態（key frame，關鍵幀），而後動畫將自行計算並模擬關鍵幀之間的過渡。那麼在設置animation的屬性以前就必須先設定好關鍵幀了。

關鍵幀@keyframes的語法結構以下：

@keyframesNAME {

a% {

/*CSS屬性*/

}

b% {

/*CSS屬性*/

}

...

}

NAME表示動畫的名字；a%、b%表示以百分號結尾的百分數，用於設定該關鍵幀在動畫生命週期中的位置；百分數後面的{ } 中則須要寫成該關鍵幀狀態下CSS屬性的值。另外，若是同一個百分數值在@keyframes中出現屢次，那麼後出現的將覆蓋先出現的；而且關鍵幀在@keyframes中時無序的。

設置完關鍵幀後就能夠繼續設定animation了。

animation-name

指定選用的動畫的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

設定動畫執行的次數，其值能夠是數字也能夠是infinite（循環執行）。

animation-direction

設定動畫執行的方向，其值能夠是normal（正常順序播放）或alternate（反向播放）。

前綴

由於CSS3尚未正式發佈，因此各類瀏覽器對它的支持也不盡相同。因此在設置CSS3屬性（包括@開頭的新屬性）的時候一般須要對其添加瀏覽器標識的前綴，如-webkit- 表示Webkit內核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無視IE吧，在IE上的實現一般仍是要用到濾鏡，而不是CSS3。

實例

下面的代碼模擬了上述大部分的CSS3動畫屬性，因爲只使用了–webkit- 前綴，因此只能在Chrome或Safari下正常運行。

HTML代碼：

複製代碼

代碼以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3動畫</title>
<link type="text/css" rel="stylesheet" href="animation.css" />
</head></p> <p><body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html> 

CSS代碼：

animation.css

複製代碼

代碼以下:

div { width: 80px; height: 30px; line-height: 30px; text-align: center; background: #06F; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-border-radius: 10px; margin: 5px; }</p> <p>.rotate { -webkit-transform: rotate(0deg); }</p> <p>.rotate:hover { -webkit-transform: rotate(90deg); }</p> <p>.scale { -webkit-transform: scale(1); }</p> <p>.scale:hover { -webkit-transform: scale(1.5); }</p> <p>.translate { -webkit-transform: translate(0px, 0px); }</p> <p>.translate:hover { -webkit-transform: translate(50px, 50px); }</p> <p>.skew { -webkit-transform: skew(0); }</p> <p>.skew:hover { -webkit-transform: skewY(20deg); }</p> <p>.origin { -webkit-transform-origin: top left; -webkit-transform: rotate(0); }</p> <p>.origin:hover { -webkit-transform: rotate(45deg); }</p> <p>.single { width: 150px; }</p> <p>.single:hover { background: #f00; width: 200px; height: 100px; line-height: 100px; -webkit-transition-property: background; -webkit-transition-duration: 2s; }</p> <p>.whole { width: 150px; }</p> <p>.whole:hover { width: 200px; height: 100px; line-height: 100px; background: #f00; -webkit-transition-duration: 2s; }</p> <p>.resume { width: 150px; -webkit-transition-duration: 2s; }</p> <p>.resume:hover { width: 200px; height: 100px; line-height: 100px; background: #f00; -webkit-transition-duration: 2s; }</p> <p>.animation:hover { -webkit-animation-name: anim; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; }</p> <p>@-webkit-keyframes anim { 0% { width: 80px; height: 30px; line-height: 30px; background: #06F; } 50% { width: 140px; height: 65px; line-height: 65px; background: #360; } 100% { width: 200px; height: 100px; line-height: 100px; background: #f00; } }

1. css製做動畫
2. CSS動畫製做綻開的花朵
3. Photoshop動畫製做
4. CSS3動畫製做
5. 製做svg動畫
6. Flash 動畫製做
7. canvas動畫製做
8. 利用 CSS animation 和 CSS sprite 製做動畫
9. No.3 - CSS transition 和 CSS transform 配合製做動畫
10. 在線製作css動畫——CSS animate
更多相關文章...
• W3C CSS 活動 - W3C 教程
• ionic 加載動畫 - ionic 教程
• 漫談MySQL的鎖機制
• 算法總結-滑動窗口

相關標籤/搜索

每日一句

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