css3中新增了哪些動畫效果

CSS3添加了幾個動畫效果的屬性，通過設置這些屬性，可以做出一些簡單的動畫效果而不需要再去借助JavaScript。CSS3動畫的屬性主要分為三類：transform、transition以及animation。

專注于為中小企業(yè)提供網(wǎng)站制作、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)都蘭免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

transform

rotate

設置元素順時針旋轉(zhuǎn)的角度，用法是：

transform: rotate(x);

參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負數(shù)表示反向。

scale

設置元素放大或縮小的倍數(shù)，用法包括：

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

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

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

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，想方向不變

以上的參數(shù)均必須是以deg結(jié)尾的角度數(shù)或0，可為負數(shù)表示反向。

matrix

設置元素的變形矩陣，因為矩陣變形過于復雜，暫略。

origin

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

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

元素的懸掛點即為它旋轉(zhuǎn)和傾斜時的中心點。取值中的a、b可以是長度值、以%結(jié)尾的百分比或者left、top、right、bottom四個值。

transition

transition-property

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

transition-duration

動畫效果持續(xù)的時間，其值為以s結(jié)尾的秒數(shù)。

transition-timing-function

指定元素狀態(tài)的變化速率函數(shù)，其取值基于貝賽爾曲線函數(shù)，詳情如下所示：

transition-delay

動畫效果推遲開始執(zhí)行的時間，其值為以s結(jié)尾的秒數(shù)。

CSS3動畫的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關系：

animation

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

關鍵幀@keyframes的語法結(jié)構(gòu)如下：

@keyframesNAME {

a% {

/*CSS屬性*/

}

b% {

/*CSS屬性*/

}

...

}

NAME表示動畫的名字；a%、b%表示以百分號結(jié)尾的百分數(shù)，用于設定該關鍵幀在動畫生命周期中的位置；百分數(shù)后面的{ } 中則需要寫成該關鍵幀狀態(tài)下CSS屬性的值。另外，如果同一個百分數(shù)值在@keyframes中出現(xiàn)多次，那么后出現(xiàn)的將覆蓋先出現(xiàn)的；并且關鍵幀在@keyframes中時無序的。

設置完關鍵幀后就可以繼續(xù)設定animation了。

animation-name

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

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

設定動畫執(zhí)行的次數(shù)，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）。

animation-direction

設定動畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

css3 實現(xiàn)動畫效果，怎樣使他無限循環(huán)動下去？

一、實現(xiàn)CSS3無限循環(huán)動畫代碼示例。

代碼如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg);

border:5px solid red;

}

50%{

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

}

100%{

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

}

}

.loading{

border:5px solid black;

border-radius:40px;

width: 28px;

height: 188px;

-webkit-animation:gogogo 2s infinite linear ;

margin:100px;

}

擴展資料

實現(xiàn)動畫無限循環(huán)所需要的CSS屬性說明：

1、infinite

在animation后面加上infinite就可以無限循環(huán)，另外還可以做反向循環(huán)使用animation-direction

2、animation-name

規(guī)定需要綁定到選擇器的 keyframe 名稱。

3、animation-duration

規(guī)定完成動畫所花費的時間，以秒或毫秒計。

4、animation-timing-function

規(guī)定動畫的速度曲線。

5、animation-delay

規(guī)定在動畫開始之前的延遲。

6、animation-iteration-count

規(guī)定動畫應該播放的次數(shù)。

7、animation-direction

規(guī)定是否應該輪流反向播放動畫。

css3動畫效果，如何設置呢？

要創(chuàng)建 CSS3 動畫，你需要了解 @keyframes 規(guī)則。

@keyframes 規(guī)則是創(chuàng)建動畫。

@keyframes 規(guī)則內(nèi)指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

CSS3 動畫

在 CSS3 出現(xiàn)之前，動畫都是通過 JavaScript 動態(tài)的改變元素的樣式屬性來完成了，這種方式雖然能夠?qū)崿F(xiàn)動畫，但是在性能上存在一些問題。CSS3 的出現(xiàn)，讓動畫變得更加容易，性能也更加好。

CSS3 中有三個關于動畫的樣式屬性 transform 、 transition 和 animation ；

transform 可以用來設置元素的形狀改變，主要有以下幾種變形： rotate （旋轉(zhuǎn)）、 scale （縮放）、 skew （扭曲）、 translate （移動）和 matrix （矩陣變形），語法如下：

none 表示不做變換； transform-function 表示一個或多個變化函數(shù)，變化函數(shù)由函數(shù)名和參數(shù)組成，參數(shù)包含在 () 里面，用 空格 分開，例如：

所有的變形都是基于基點，基點默認為元素的中心點。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的單詞來表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

用法： rotate(angle) ；表示通過指定的角度對元素進行旋轉(zhuǎn)變形，如果是正數(shù)則順時針旋轉(zhuǎn)，如果是負數(shù)則逆時針旋轉(zhuǎn)，例如：

它有三種用法： scale(number[, number]) 、 scaleX(number) 和 scaleY(number) ；分別代表水平和垂直方向同時縮放、水平方向的縮放以及垂直方向的縮放，入?yún)⒋硭交蛘叽怪狈较虻目s放比例。縮放比例如果大于1則放大，反之則縮小，如果等于1代表原始大小。

移動也分三種情況： translate(translation-value[, translation-value]) 、 translateX(translation-value) 和 translateY(translation-value) ；分別代表水平和垂直的移動、水平方向的移動以及垂直方向同時移動，移動單位是 CSS 中的長度單位： px 、 rem 等;

扭曲同樣也有三種情況， skew(angle[, angle]) 、 skewX(angle) 和 skewY(angle) ；同樣也是水平和垂直方向同時扭曲、水平方向的扭曲以及垂直方向的扭曲，單位為角度。

矩陣變形相對來說非常復雜，涉及到數(shù)學中的矩陣計算，有興趣的同學可以研究一下： CSS3 Transform Matrix

transition 是用來設置樣式的屬性值是如何從從一種狀態(tài)變平滑過渡到另外一種狀態(tài)，它有四個屬性：

它是用來設置哪些屬性的改變會有這種平滑過渡的效果，主要有以下值：

它是用來設置轉(zhuǎn)換過程的持續(xù)時間，單位是 s 或者 ms ，默認值為0；

它是來設置過渡效果的速率，它有6種形式的速率：

它是來設置過渡動畫開始執(zhí)行的時間，單位是 s 或者 ms ，默認值為0；

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的簡寫：

animation 比較類似于 flash 中的 逐幀動畫 ，逐幀動畫就像電影的播放一樣，表現(xiàn)非常細膩并且有非常大的靈活性。然而 transition 只是指定了開始和結(jié)束態(tài)，整個動畫的過程也是由特定的函數(shù)控制。學習過 flash 的同學知道，這種逐幀動畫是由 關鍵幀 組成，很多個關鍵幀連續(xù)的播放就組成了動畫，在 CSS3 中是由屬性 keyframes 來完成逐幀動畫的。

它是用來設置動畫的名稱，可以同時賦值多個動畫名稱，用 , 隔開：

它是用來設置動畫的持續(xù)時間，單位為 s ，默認值為 0 ：

和 transition-timing-function 類似：

它是來設置動畫的開始時間，單位是 s 或者 ms ，默認值為0：

它是來設置動畫循環(huán)的次數(shù)，默認為 1 ， infinite 為無限次數(shù)的循環(huán)：

它是來設置動畫播放的方向，默認值為 normal 表示向前播放， alternate 代表動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放：

它主要是來控制動畫的播放狀態(tài)： running 代表播放，而 paused 代表停止播放， running 為默認值：

它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的簡寫：

關于 CSS3 的動畫的三個屬性 transform 、 transition 、 animation 我們都介紹完了，讓我們回顧一下。 transform 我們可以理解為元素的幾何變形，它是有規(guī)律可尋的，這種變形并不會產(chǎn)生動畫效果僅僅是原有形狀的改變； transition 和 animation 它們很像 flash 中的 補間動畫 和 逐幀動畫 ； transition 是從一個狀態(tài)變化到另外一種狀態(tài)，當變化有了平滑的效果后就產(chǎn)生了動畫，它是一個公式化的變化，在比較規(guī)則的動畫效果中我們可以使用，例如：旋轉(zhuǎn)的風車、行駛的汽車、顏色的漸變等等； animation 的動畫效果更加靈活，可以實現(xiàn)像影片一樣的復雜無規(guī)則的動畫。

JS 怎么動態(tài)設置CSS3動畫的樣式

引入jquery

然后給你要設置動畫的對象增加或者刪除css3動畫的類就可以了。

如我這里用colorchange這個漸變類在css里面寫好動畫效果以后在js里面給對象添加上就可以實現(xiàn)動畫了

!DOCTYPE?html

html

head?lang="en"

meta?charset="UTF-8"

titleTest/title

style?type="text/css"

body{

padding:?20px;

background-color:#FFF;

}

.colorchange

{

animation:myfirst?5s;

-moz-animation:myfirst?5s;?/*?Firefox?*/

-webkit-animation:myfirst?5s;?/*?Safari?and?Chrome?*/

-o-animation:myfirst?5s;?/*?Opera?*/

}

@keyframes?myfirst

{

from?{background:red;}

to?{background:yellow;}

}

@-moz-keyframes?myfirst?/*?Firefox?*/

{

from?{background:red;}

to?{background:yellow;}

}

@-webkit-keyframes?myfirst?/*?Safari?and?Chrome?*/

{

from?{background:red;}

to?{background:yellow;}

}

@-o-keyframes?myfirst?/*?Opera?*/

{

from?{background:red;}

to?{background:yellow;}

}

#main{

width:100px;

height:100px;

background:red;

}

#cgbt{

width:?100px;

margin:?20px?0?0?0;

text-align:?center;

cursor:?pointer;

}

#cgbt:hover{

background-color:?#2D93CA;

}

/style

/head

body

div?id="main"

我會變么？

/div

div?id="cgbt"

點我讓上面的變顏色

/div

script?src="jquery-3.2.1.min.js"?type="application/javascript"/script

script

$(document).ready(function(){

$("#cgbt").click(function(){

$("#main").attr("class","colorchange");

});

});

/script

/body

/html

網(wǎng)頁題目：css3里的動畫樣式,css動畫效果大全
URL標題：http://www.chinadenli.net/article10/dsdsjgo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站策劃、面包屑導航、虛擬主機、品牌網(wǎng)站設計、外貿(mào)網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)