CSS樣式更改——過渡、動畫

阿新 • • 發佈：2020-09-13

前言

上篇文章主要講述了CSS樣式更改中的2D轉換，這篇文章我們來介紹下CSS樣式更改中的過渡、動畫基礎用法。

1.過渡

元素從一種樣式逐漸改變為另一種的樣式

div
{
transition: width 1s;
-moz-transition: width 1s;  /* Firefox 4 */
-webkit-transition: width 1s;  /* Safari 和 Chrome */
-o-transition: width 1s;  /* Opera */
}
transition-property:應用過渡的Css屬性的名稱 比如寬度width
transition-duration:過渡效果花費的時間   比如1s
transition-timing-function:渡效果的時間曲線 如下所示：
linear 勻速
ease 先慢後快
ease-in 慢速開始
ease-out 慢速結束
ease-in-out 慢速開始和結束
cubic-bezier(n,n,n,n) 在cubic-bezie 函式中定義自己的值，可能的值是0至1之間的數值
transition-delay:過渡效果何時開始 如1s

2.動畫 Animation

1).首先定義@keyframes 規則

@keyframes my
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes my /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes my /* Opera */
{
from {background: red;}
to {background: yellow;}
}

為了豐富元素的變化過程，你可以把from to改為百分比的樣子：

@keyframes my
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes my /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes my /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
定義好了，接下來我們就可以啟動我們的動畫了。

2).animation啟動動畫效果

div
{
animation-name: my;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: my;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: my;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: my;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

animation-name                   選擇器的 keyframes 的名稱
animation-duration               動畫所花費的時間
animation-timing-function        勻速播放動畫
animation-delay           動畫過多久開始
animation-iteration-count        播放動畫次數
animation-direction       是否在下一週期逆向地播放 normal 正常播放  alternate 輪流反向播放
animation-play-state             暫停動畫  paused 動畫已暫停  running 動畫正在播放
animation-fill-mode
none         不填充
forwards     當動畫完成後，保持最後一個屬性值
backwards     在animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值
both        向前和向後填充模式都被應用。

參考文件：W3C官方文件（CSS篇）