CSS transition animation的使用（內(nèi)含貝賽爾曲線詳解）(4)

2019-10-16 22:52:43 來源：互聯(lián)網(wǎng)作者：買辣椒也用券 人氣： 次閱讀 604 條評(píng)論

文章主要介紹了css transition animation的使用（內(nèi)含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，區(qū)別：transition也叫過渡動(dòng)畫...

css3 動(dòng)畫屬性 

 

屬性 描述 CSS

@keyframes

 規(guī)定動(dòng)畫。 3

animation

 所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。 3

animation-name

 規(guī)定 @keyframes 動(dòng)畫的名稱。 3

animation-duration

 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 3

animation-timing-function

 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。 3

animation-delay

 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。 3

animation-iteration-count

 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 3

animation-direction

 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 3

animation-play-state

 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 3

animation-fill-mode

 規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。 3 
<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
    -moz-animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */
    -webkit-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */
    -o-animation:myfirst 5s linear 2s infinite alternate;/* Opera: */
}
@keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>

效果如下：

彩蛋

在火狐和谷歌中可以很方便的調(diào)處過渡效果時(shí)間曲線的定時(shí)函數(shù)編輯器，只用點(diǎn)擊下面的按鈕就可以了。

谷歌中：

火狐中：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助

4/4首頁234

您可能感興趣的文章

相關(guān)文章