溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何實現css3動畫效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何實現css3動畫效果”文章能幫助大家解決問題。
實現css3動畫效果：1、利用“@keyframes”規則配合animation屬性實現動畫效果；2、利用transition過渡屬性實現動畫效果，語法為“元素{transition:屬性名稱 時間 速度曲線 delay}”。
本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
一、是什么
CSS動畫（CSS Animations）是為層疊樣式表建議的允許可擴展標記語言（XML）元素使用CSS的動畫的模塊
即指元素從一種樣式逐漸過渡為另一種樣式的過程
常見的動畫效果有很多，如平移、旋轉、縮放等等，復雜動畫則是多個簡單動畫的組合
css實現動畫的方式，有如下幾種：
transition 實現漸變動畫
animation 實現自定義動畫
二、實現方式
transition 實現漸變動畫
transition的屬性如下：
property:填寫需要變化的css屬性
duration:完成過渡效果需要的時間單位(s或者ms)
timing-function:完成效果的速度曲線
delay: 動畫效果的延遲觸發時間
其中timing-function的值有如下：
值 描述
linear 勻速（等于 cubic-bezier(0,0,1,1)）
ease 從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in 慢慢變快（等于 cubic-bezier(0.42,0,1,1)）
ease-out 慢慢變慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），漸顯漸隱效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值
注意：并不是所有的屬性都能使用過渡的，如display:none<->display:block
舉個例子，實現鼠標移動上去發生變化動畫效果
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>輸出結果：
animation 實現自定義動畫
animation是由 8 個屬性的簡寫，分別如下：
animation-duration 指定動畫完成一個周期所需要時間，單位秒（s）或毫秒（ms），默認是 0
animation-timing-function 指定動畫計時函數，即動畫的速度曲線，默認是 "ease" linear、ease、ease-in、ease-out、ease-in-out
animation-delay 指定動畫延遲時間，即動畫何時開始，默認是 0
animation-iteration-count 指定動畫播放的次數，默認是 1
animation-direction 指定動畫播放的方向 默認是 normal normal、reverse、alternate、alternate-reverse
animation-fill-mode 指定動畫填充模式。默認是 none forwards、backwards、both
animation-play-state 指定動畫播放狀態，正在運行或暫停。默認是 running running、pauser
animation-name 指定 @keyframes 動畫的名稱
CSS 動畫只需要定義一些關鍵的幀，而其余的幀，瀏覽器會根據計時函數插值計算出來，
通過 @keyframes 來定義關鍵幀
因此，如果我們想要讓元素旋轉一圈，只需要定義開始和結束兩幀即可：
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}from 表示最開始的那一幀，to 表示結束時的那一幀
也可以使用百分比刻畫生命周期
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}定義好了關鍵幀后，下來就可以直接用它了：
animation: rotate 2s;
關于“如何實現css3動畫效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
