第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

animation-direction屬性主要用來設(shè)置動(dòng)畫播放方向，其語法規(guī)則如下：

animation-direction:normal?|?alternate?[,?normal?|?alternate]*

其主要有兩個(gè)值：normal、alternate

1、normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；

2、另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

例如：通過animation-direction屬性，將move動(dòng)畫播放動(dòng)畫方向設(shè)置為alternate，代碼為：

animation-direction:alternate;

animation-iteration-count屬性主要用來定義動(dòng)畫的播放次數(shù)。

語法規(guī)則：

animation-iteration-count:?infinite?|?<number>?[,?infinite?|?<number>]*

1、其值通常為整數(shù)，但也可以使用帶有小數(shù)的數(shù)字，其默認(rèn)值為1，這意味著動(dòng)畫將從開始到結(jié)束只播放一次。

2、如果取值為infinite，動(dòng)畫將會(huì)無限次的播放。

animation-delay屬性用來定義動(dòng)畫開始播放的時(shí)間，用來觸發(fā)動(dòng)畫播放的時(shí)間點(diǎn)。和transition-delay屬性一樣，用于定義在瀏覽器開始執(zhí)行動(dòng)畫之前等待的時(shí)間。

語法規(guī)則：

animation-delay:<time>[,<time>]*

animation-timing-function屬性主要用來設(shè)置動(dòng)畫播放方式。主要讓元素根據(jù)時(shí)間的推進(jìn)來改變屬性值的變換速率，簡單點(diǎn)說就是動(dòng)畫的播放方式。

語法規(guī)則：

animation-timing-function:ease?|?linear?|?ease-in?|?ease-out?|?ease-in-out?|?cubic-bezier(<number>,?<number>,?<number>,?<number>)?[,?ease?|?linear?|?ease-in?|?ease-out?|?ease-in-out?|?cubic-bezier(<number>,?<number>,?<number>,?<number>)]*

它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。對(duì)應(yīng)功如下：

在調(diào)用move動(dòng)畫播放中，讓元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時(shí)，先加速再減速，也就是漸顯漸隱效果。

animation-duration主要用來設(shè)置CSS3動(dòng)畫播放時(shí)間，其使用方法和transition-duration類似，是用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間長，也就是完成從0%到100%一次動(dòng)畫所需時(shí)間。單位：S秒 語法規(guī)則 animation-duration:[,]* 取值為數(shù)值，單位為秒，其默認(rèn)值為“0”，這意味著動(dòng)畫周期為“0”，也就是沒有動(dòng)畫效果（如果值為負(fù)值會(huì)被視為“0”）。

animation-name屬性主要是用來調(diào)用?@keyframes?定義好的動(dòng)畫。需要特別注意: animation-name 調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致（區(qū)分大小寫），如果不一致將不具有任何動(dòng)畫效果。

語法：

animation-name:?none?|?IDENT[,none|DENT]*;

1、IDENT是由?@keyframes?創(chuàng)建的動(dòng)畫名，上面已經(jīng)講過了（animation-name 調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致）；

2、none為默認(rèn)值，當(dāng)值為 none 時(shí)，將沒有任何動(dòng)畫效果,這可以用于覆蓋任何動(dòng)畫。

注意：需要在 Chrome 和 Safari 上面的基礎(chǔ)上加上-webkit-前綴，F(xiàn)irefox加上-moz-。

font-family的設(shè)置
text-shadow的設(shè)置

Keyframes被稱為關(guān)鍵幀，其類似于Flash中的關(guān)鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動(dòng)畫名稱加上一對(duì)花括號(hào)“{…}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則。

@keyframes?changecolor{
??0%{
???background:?red;
??}
??100%{
????background:?green;
??}
}

在一個(gè)“@keyframes”中的樣式規(guī)則可以由多個(gè)百分比構(gòu)成的，如在“0%”到“100%”之間創(chuàng)建更多個(gè)百分比，分別給每個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的樣式，從而達(dá)到一種在不斷變化的效果。

經(jīng)驗(yàn)與技巧：在@keyframes中定義動(dòng)畫名稱時(shí)，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對(duì)應(yīng)的是from，100%對(duì)應(yīng)的是to。

瀏覽器的支持情況：

Chrome?和?Safari?需要前綴?-webkit-；Foxfire?需要前綴?-moz-。

transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設(shè)置過渡動(dòng)畫的持續(xù)時(shí)間，而transition-delay主要用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L時(shí)間開始執(zhí)行。

有時(shí)我們想改變兩個(gè)或者多個(gè)css屬性的transition效果時(shí)，只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“，”）隔開，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：第一個(gè)時(shí)間的值為 transition-duration，第二個(gè)為transition-delay。

例如：a{?transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

transition-timing-function規(guī)定速度效果的速度曲線。 transition-delay定義過渡效果何時(shí)開始。

transition-timing-function屬性指的是過渡的“緩動(dòng)函數(shù)”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進(jìn)展情況，其中要包括以下幾種函數(shù)：

transition-duration屬性主要用來設(shè)置一個(gè)屬性過渡到另一個(gè)屬性所需的時(shí)間，也就是從舊屬性過渡到新屬性花費(fèi)的時(shí)間長度，俗稱持續(xù)時(shí)間。

早期在Web中要實(shí)現(xiàn)動(dòng)畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個(gè)新的模塊transition，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。簡單點(diǎn)說，就是通過鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫效果改變CSS的屬性值。

在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個(gè)步驟來實(shí)現(xiàn)：
第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認(rèn)樣式中通過添加過渡函數(shù)，添加一些不同的樣式。

CSS3的過度transition屬性是一個(gè)復(fù)合屬性，主要包括以下幾個(gè)子屬性：

• transition-property:指定過渡或動(dòng)態(tài)模擬的CSS屬性

• transition-duration:指定完成過渡所需的時(shí)間

• transition-timing-function:指定過渡函數(shù)

• transition-delay:指定開始出現(xiàn)的延遲時(shí)間

先來看transition-property屬性

transition-property用來指定過渡動(dòng)畫的CSS屬性名稱，而這個(gè)過渡屬性只有具備一個(gè)中點(diǎn)值的屬性（需要產(chǎn)生動(dòng)畫的屬性）才能具備過渡效果，其對(duì)應(yīng)具有過渡的CSS屬性主要有：

任何一個(gè)元素都有一個(gè)中心點(diǎn)，默認(rèn)情況之下，其中心點(diǎn)是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變?cè)卦c(diǎn)位置的情況下，CSS變形進(jìn)行的旋轉(zhuǎn)、位移、縮放，扭曲等操作都是以元素自己中心位置進(jìn)行變形。但很多時(shí)候，我們可以通過transform-origin來對(duì)元素進(jìn)行原點(diǎn)位置改變，使元素原點(diǎn)不在元素的中心位置，以達(dá)到需要的原點(diǎn)位置。

transform-origin取值和元素設(shè)置背景中的background-position取值類似，如下表所示：

matrix()?是一個(gè)含六個(gè)值的(a,b,c,d,e,f)變換矩陣，用來指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個(gè)屬性值，如果需要深入了解，需要對(duì)數(shù)學(xué)矩陣有一定的知識(shí)。

translate我們分為三種情況：

1、translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）

2、translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）

3、translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）