首頁 > 文章 > web前端 > css3動畫之transition和animation屬性介紹

css3動畫之transition和animation屬性介紹

青灯夜游轉載: 2018-10-11 16:07:192988瀏覽

本文介紹實作css3動畫的transition和animation屬性，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

tradition總共有4個屬性：

#transition-property 過渡屬性

transition-property 過渡屬性

##none：沒有屬性會獲得過渡效果

all：所有屬性都會獲得過渡效果

porperty：width,height...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

transition的作用在於指定狀態變化所需的時間。

img{
    transition: 1s;
}

transition-duration 完成狀態過渡的秒或毫秒

也可以指定transition的變化屬性，例如是width變化還是height

img{
    transition: 1s height;
}

也可以指定多個屬性

img{
    transition: 1s height, 1s width
}

transition-delay 狀態變化速度。

指定delay參數，使得height先發生變化，然後在讓width發生變化：

img{
    transition: 1s height, 1s 1s width
}

delay 真正的意義在於指定了動畫發生的順序，使得多個不同的transition可以在不同的時刻發生形成一種動畫效果

transition-timing-function 狀態變化速度

預設的是逐漸放慢ease

#可能取值有

linear：勻速
#easy-in：加速
##ease -out：減速
cubic-bezier函數，自訂速度模式

（cubic：立方體的，bezier：貝塞爾曲線）

cubic-bezier（bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8）取值範圍0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}

注意：transition需要明確知道開始狀態和結束狀態的特定數值才能計算出中間狀態。但是transition沒辦法計算0->auto的狀態，那就不會產生動畫效果。類似情況還有display：none->block和background:url(foo.jpg)->url(bar.jpg)的情況。

它有的缺點：

需要事件觸發，沒辦法在網頁載入時候直接發生
是一次性的，不能重複發生，除非你重複觸發它
只能定義開始狀態和結束狀態，不能定義中間狀態
一個transition規則，只能定義一個屬性的變化

animation

CSS Animation一共有以下屬性：

animation-name 需要綁定到選擇器keyframe的名稱
animation-duration 完成動畫所需時間，以秒或毫秒計算
animation-timing-function 規定動畫的速度曲線
animaton-delay 動畫開始之前延遲的時間
#animation-iteration-count 動畫應該播放的次數
animation-direction 是否應該輪流反向播放動畫
animation-fill -mode 屬性規定動畫播放之後其動態效果是否可見
animatoin-play-state 規定動畫正在運行還是暫停

iteration-重複

animation-name

animation-duration

首先设置动画的名称和持续的时长

p:hover{
animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在p元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframs rainbow{
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

keyframs的写法相当自由

可以用from表示0%，to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果忽略某个状态，浏览器会自动推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}

浏览器从一个状态到另外一个状态是平滑过渡到，steps函数实现分步过渡

p:hover {
animation: 1s rainbow infinite steps(10);
}

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

p:hover{
animation: 1s rainbow infinite;
}

除了infinite，还可以设置为具体的次数： 3、5

p:hover{
animation: 1s rainbow 5;
}

animation-fill-mode

动画结束以后会立即冲结束状态回到起始状态，如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}

animation-fill-mode 有4种取值

none 不改变默认行为

forawads 动画完成后，保持最后一个属性（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both 向前向后都进行填充

animation-direction

规定了轮流反向播放动画

alternate：动画会在奇数次（1，3，5...）正常播放，偶数次（2,4,6...）反向播放

最常用alternate和revers，浏览器对其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程！

css3動畫之transition和animation屬性介紹

相關文章