css3 動畫之transition，animation
阿新 • • 發佈：2019-01-07
css3動畫
csss3實現動畫的方式主要有兩種方式：一種是用transition過渡效果來實現動畫，另外一種直接使用animation配合keyframe來實現。雖然這兩種方式都能實現動畫效果，但是區別還是有的。
transition
官方屬性解釋：
也可以把屬性寫成一行：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2 transition主要用來實現兩幀動畫，也即開始和結束，通過過渡可以實現一些特殊的效果。transition動畫既可以用滑鼠hover狀態來觸發，也可以用js指令碼來觸發。
需要注意的是：transition預設有逆向動畫的特性
1.hover觸發
<!doctype html>
<html lang="en">
<head>
<title></title>
<style 
當滑鼠放上去後，夜景透明度將慢慢從0變成1，慢慢顯示出來，因為夜景是在上層，所以日景將慢慢消失。因為transition動畫預設有逆向動畫的特性，當滑鼠移開後，夜景將慢慢消失，日景將慢慢顯示，而不是突兀的從夜景變為日景。
2.js指令碼觸發
<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
img {
position:absolute;
transition: opacity 5s;
-webkit-transition: opacity 5s;
}
.solid {
opacity: 1;
}
.transparent {
opacity: 0;
}
</style>
<script>
function toNight(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "solid";
}
function toDay(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "transparent";
}
</script>
</head>
<body>
<button onclick="toNight()">看夜景</button>
<button onclick="toDay()">看日景</button>
<div>
<img src="https://img-blog.csdn.net/20170416194335276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="日景"/>
<img src="https://img-blog.csdn.net/20170416194441746?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="夜景" id="nightImage" class="transparent"/>
</div>
</body>
</html>
當點選看夜景後，夜景透明度將慢慢從0變成1，慢慢顯示出來，因為夜景是在上層，所以日景將慢慢消失。因為transition動畫預設有逆向動畫的特性，當點選看日景將夜景圖片的透明度改為0的時候，夜景並不會突兀的立馬消失，而是隨著透明度慢慢的從1變為0，慢慢的消失，日景也隨之慢慢的顯現出來。
animation
@keyframes 規則和所有動畫屬性：
可以把所有屬性寫在一行：
div
{
animation: myfirst 5s linear 2s infinite alternate running;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate running;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate running;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate running;
}keyframes有兩種寫法：
1.from和to
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}2.%
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}animation主要用來實現多幀動畫，多幀的狀態是通過@keyframes來實現的，每個狀態對應了一幀，在某些情況下元素的初始狀態也是一幀。
需要注意的是：
- animation-direction預設狀態下值為normal，即當動畫到結束位置時不會自動逆向動畫，會突然回到起點位置和狀態，即使是迴圈動畫，在執行到終點時也會突然回到起點位置和狀態。當設定了值為alternate時，在動畫到達終點時會沿著來時的動畫軌跡逆向回到起點位置和狀態（transition預設就有逆向動畫的特性，可以想象成其也有個animation-direction屬性，只不過只有個alternate值）。在設定了alternate的情況下，其逆向動畫也算一次動畫計數。
- animation-play-state預設的值是running，也即執行狀態，可以通過js程式碼使其為pause來暫停動畫，當動畫暫停時，動畫的執行時間animation-duration也將暫停計時，當再次變為running值時，可以從當前位置繼續執行動畫。
- animation-fill-mode預設值為none，也即當動畫結束時會回到起點的位置和狀態，可以將其設定為forwards，這樣當動畫結束後會保持在終點的位置和狀態。
animation有三種方式觸發：
1.直接給元素新增動畫，頁面渲染時就觸發
<!doctype html>
<html lang="en">
<head>
<title></title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
animation: myfirst 5s forwards;
}
@keyframes myfirst
{
100%{
width: 1000px;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>在這種情況下，元素的初始狀態也是一幀，所以可以不用設定0%對應的狀態
2.hover觸發
<!do
ctype html>
<html lang="en">
<head>
<title></title>
<style>
img {
position:absolute;
}
.transparent {
opacity: 0;
}
.transparent:hover{
animation: night 5s;
}
@keyframes night
{
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<div>
<img src="https://img-blog.csdn.net/20170416194335276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="日景"/>
<img src="https://img-blog.csdn.net/20170416194441746?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="夜景" id="nightImage" class="transparent"/>
</div>
</body>
</html>這個效果和之前transition用hover觸發的那個例子的效果一樣，在用hover觸發的情況下，動畫的第一幀即元素當前所對應的狀態，所以@keyframes night可以不設定0%的狀態。
3.用js指令碼觸發
<!doctype html>
<html lang="en">
<head>
<title></title>
<style>
img {
position:absolute;
}
.transparent {
opacity: 0;
}
.day {
animation: day 5s;
}
.night {
animation: night 5s;
}
@keyframes night
{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes day
{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
<script>
function toNight(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "night";
}
function toDay(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "day";
}
</script>
</head>
<body>
<button onclick="toNight()">看夜景</button>
<button onclick="toDay()">看日景</button>
<div>
<img src="https://img-blog.csdn.net/20170416194335276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="日景"/>
<img src="https://img-blog.csdn.net/20170416194441746?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQwOTA1MTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="夜景" id="nightImage" class="transparent" />
</div>
</body>
</html> 這個例子的效果和之前transition用js觸發的那個例子的效果一樣，在用js事件改變class來觸發animation動畫的情況下，@keyframes如果用百分號劃分幀界限，則@keyframes預設的第一幀為規則裡最小的那個值所對應的狀態。如果用from，to劃分，如果定義了from，則為from所對應的狀態，否則為to。
在這個例子中，如果@keyframes night裡沒有0%的狀態，則會突兀的把透明度變為1，而不會有過渡效果，因為其第一幀就是100%對應的那一幀。