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

2019-10-16 22:52:43 來源：互聯網作者：買辣椒也用券 人氣： 次閱讀 604 條評論

文章主要介紹了css transition animation的使用（內含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，區別：transition也叫過渡動畫...

css3 動畫屬性 

 

屬性 描述 CSS

@keyframes

 規定動畫。 3

animation

 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3

animation-name

 規定 @keyframes 動畫的名稱。 3

animation-duration

 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3

animation-timing-function

 規定動畫的速度曲線。默認是 "ease"。 3

animation-delay

 規定動畫何時開始。默認是 0。 3

animation-iteration-count

 規定動畫被播放的次數。默認是 1。 3

animation-direction

 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 3

animation-play-state

 規定動畫是否正在運行或暫停。默認是 "running"。 3

animation-fill-mode

 規定對象動畫時間之外的狀態。 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>

效果如下：

彩蛋

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

谷歌中：

火狐中：

以上就是本文的全部內容，希望對大家的學習有所幫助

4/4首頁234

您可能感興趣的文章

相關文章