css_transition_animation（內含貝賽爾曲線詳解）

時間 2019-11-29

標籤 css transition animation 內含曲線詳解欄目 CSS 简体版

原文原文鏈接

區別：

transition也叫過渡動畫，主要是用於讓一個元素從一種狀態過渡到另外一種狀態效果，經常使用於主動觸發的效果。例如移動端的頁面切換（很經常使用）、button點擊效果（也很常見）。

animation纔是css3正宗的動畫，主要是用於實現某種持續的動畫效果（固然簡單的過渡動畫也能夠實現），經常使用於自動觸發的效果。例如加載中的持續動畫效果等等。

css

在學習這兩種動畫以前要最好是先了解一下 transition-timing-function（過渡效果時間曲線）；
舉個栗子：

好比一輛小汽車從a點到b點的運動過程是一個動畫，那麼過渡效果時間曲線就是這輛小汽車究竟是勻速過去呢仍是一直加速衝過去，又或者說一會加速衝一會減速慢行。

這個屬性有五種可供選擇的屬性值和一種能夠自定義的屬性值
自定義屬性值：cubic-bezier(n,n,n,n)
在瞭解這個自定義屬性值以前咱們再來深刻了解一下貝塞爾曲線。
爲何要了解貝塞爾曲線？由於這個自定義時間過渡曲線就是用貝塞爾曲線表示的。（這是一個三階的貝塞爾曲線）
貝塞爾曲線應用場景有哪些？貝塞爾曲線不只僅在描述速度、時間上會起做用，在ps中的色彩調節和一些建築工程學上面都會有涉及。
那咱們先來畫一個二階的貝塞爾曲線吧。
首先打開ps，在一個平面內隨便畫三個點a、b、c而後鏈接起來，以下圖。

而後在a、b中找到一點d，在b、c中找到一點e，知足公式：ad/ab = be/bc

而後呢，鏈接d、e，在de線上找到一點f，知足公式：df/de = ad/ab = be/bc

而後就沒有而後了，由於這個二階貝塞爾曲線已經畫完了，這個曲線就是全部可能的f點。
而後我用谷歌瀏覽器調試工具再演示一下二階貝塞爾曲線圖（原本是想用火狐演示的，可是火狐瀏覽器調試曲線的時候層級有點高，還很敏感，沒法用gif工具錄製，因此就放棄了，但實際上我更喜歡火狐的調試動畫調試工具一點。）
一、上面的球表明動畫執行的過程，球越快，顏色越淺，反之越深。
二、兩個固定點的座標是（0，0）和（1，1）
三、可調試點的座標是隨意拉動的，x軸要在0-1之間，y軸隨意。
四、x軸表明的時間，y軸表明的是路程（由於不少動畫並非簡單的左右移動，因此之後要理解成動畫執行的過程），注意：y軸不是速度，更不是加速度哦。
五、最下面的是cubic-bezier屬性具體取到的值（後面再講裏面4個值得具體含義）

但實際開發過程當中咱們用到的大部分都是三階貝塞爾曲線（固然也有用多階貝塞爾曲線的），也就是用兩個點去控制曲線的弧度，具體原理和上面的相似，如圖：

如今就能夠解釋cubic-bezier爲何有四個值，就是這個兩個座標點。
再次聲明一下，y軸是距離，不是速度和加速度html

cubic-bezier屬性還有五個可供選擇的值：（其實就是幾種寫死的過渡效果曲線）css3

·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)）。

1、transition （過渡動畫）

屬性	描述	CSS
transitionweb	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property瀏覽器	規定應用過渡的 CSS 屬性的名稱。	3
transition-durationbash	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function編輯器	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay函數	規定過渡效果什麼時候開始。默認是 0。	3

實例：工具

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:yellow;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(0,0,1,1);
    transition-delay:0s;
}
div:hover{
    width:500px;
}
</style>
</head>
<body>
<div></div>
<p>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</p>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
<p><b>註釋：</b>這個過渡效果會在開始以前等待兩秒。</p>
</body>
</html>

效果以下

transition簡化屬性寫法：
transition: property duration timing-function delay;學習

默認值是transition：all 0 ease 0；

注意事項

在移動開發中直接使用transition動畫會讓頁面變得很是卡頓（親測），因此咱們經常使用transform:translate3D(0,0,0)或者transform:translateZ(0)來開啓移動端動畫的gpu加速，使動畫過程更流暢。
translate3D(0,0,0)是指電儀3D轉換
translateZ(0)是指定義3D轉換，只用Z軸

2、animation（動畫效果）

由於animation動畫是一段持續且循環的動畫效果，因此不像transition過渡動畫那樣簡潔，可能會涉及到很複雜的動畫效果，因此咱們要先學習一下@keyframes規則
該規則是用來建立動畫的，說直白點就是告訴元素按哪一種動畫效果執行

@keyframes語法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

值

描述

animationname

必需。定義動畫的名稱。

keyframes-selector

必需。動畫時長的百分比。

合法的值：

0-100%
from（與 0% 相同）
to（與 100% 相同）

css-styles

必需。一個或多個合法的 CSS 樣式屬性。

案例

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-o-keyframes mymove /* Opera */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
</style>
</head>
<body>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>

效果以下：

說明

也就是說keyframes容許你設置在不一樣的時間段執行不一樣的動畫效果

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>