css3 animation動畫，你會用了嗎？ -cyy
阿新 • • 發佈：2020-11-12
animation關鍵幀使用介紹：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:100px; height:100px; background:white; animation-name:hd; animation-duration:2s; } /* @keyframes hd{ from{ background:white; } to{ background:#e91e63; } }*/ @keyframes hd{ 0%{ background:white; } 25%{ transform:scale(2); } 65%{ transform:scale(1); } 100%{ background:#e91e63; } } </style> </head> <body> <main></main> </body> </html>
幀順序與起始與終點幀特性：
順序顛倒不影響；
起點幀不寫的話，是使用元素預設的狀態；
終點幀不設定的話，也是會回到元素預設的狀態；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:100px; height:100px; background:white; animation-name:hd; animation-duration:2s; } @keyframes hd{ 100%{ background:#e91e63; } 0%{ background:white; } } </style> </head> <body> <main></main> </body> </html>
移動的小方塊：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:hd; animation-duration:4s; } @keyframes hd{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } </style> </head> <body> <main> <div></div> </main> </body> </html>
同時宣告關鍵幀規則：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:hd; animation-duration:4s; } @keyframes hd{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); background:pink; border-radius:0; } 75%{ transform:translate(0,300px); } 25%,75%{ background:#abcdef; border-radius:50%; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
多個動畫使用與時間配置：
當動畫數量超過定義的動畫時間數量時，多出的動畫會從頭迴圈時間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:4s; animation-duration:4s,2s; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
屬性重疊對動畫的影響：
當屬性重疊時，前面的會被後面的覆蓋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:4s; animation-duration:4s,2s; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; transform:translate(300px,0); } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
多動畫控制移動端引導背景頁：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ background-color: dimgrey; } main{ width:100vw; height:100vh; background-color: #34495e; transform:scale(0); animation-name:scale,background; animation-duration:2s; animation-fill-mode:forwards; display:flex; justify-content: center; align-items: center; } main::after{ content:'CYY'; color:white; font-size:2em; opacity:0; animation-name:opacity; animation-duration:1s; animation-delay:2s; animation-fill-mode:forwards; } @keyframes opacity{ to{ opacity:.8; } } @keyframes scale{ 25%{ transform:scale(.5); } 50%{ transform:scale(1) rotate(360deg); } 75%{ transform:scale(.5); } 100%{ transform:scale(1); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } 100%{ background:#f48eb1; } } </style> </head> <body> <main> </main> </body> </html>
動畫屬性中間值詳解：
有中間值的屬性才可以進行動畫，否則就是突變
animation-iteration-count 控制動畫播放次數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:2s; animation-iteration-count:2; animation-iteration-count:2,1; /* 無限迴圈 */ animation-iteration-count:infinite; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
使用變形繪製小心心：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } .heart{ width:200px; height:200px; background:#e93e1e; position:relative; transform:rotate(45deg) scale(.5); animation-name:hd; animation-duration:2s; animation-iteration-count:infinite; opacity:.5; } @keyframes hd{ 20%{ transform:rotate(45deg) scale(1); opacity:1; } 40%{ transform:rotate(45deg) scale(.5); opacity:.5; } 60%{ transform:rotate(45deg) scale(1); opacity:1; } 80%{ transform:rotate(45deg) scale(.5); opacity:.5; } 100%{ transform:rotate(45deg) scale(1); opacity:1; } } .heart::before{ content:''; width:200px; height:200px; background:#e93e1e; transform:translateX(-100px); position:absolute; border-radius:50%; } .heart::after{ content:''; width:200px; height:200px; background:#e93e1e; transform:translateY(-100px); position:absolute; border-radius:50%; } </style> </head> <body> <div class="heart"></div> </body> </html>
animation-direction 控制動畫方向的四種模式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } ul{ width:400px; height:100px; list-style:none; display:flex; } li{ color:#e93e1e; flex:1; border:1px solid #ddd; display:flex; justify-content: center; position: relative;; } li span{ position:absolute; bottom:0; } li:nth-child(1)>i{ /* 預設值normal，不加也可以 */ /* 正向，迴圈時突變 */ animation-direction:normal; } li:nth-child(2)>i{ /* 反向，迴圈時突變 */ animation-direction:reverse; } li:nth-child(3)>i{ /* 正向，迴圈時過渡 */ animation-direction:alternate; } li:nth-child(4)>i{ /* 反向，迴圈時過渡 */ animation-direction:alternate-reverse; } i.fa{ font-size:3em; animation-name:scale; animation-duration:2s; animation-iteration-count:infinite; position:absolute; } @keyframes scale{ to{ transform:scale(2); } } </style> </head> <body> <ul> <li><i class="fa fa-heart" aria-hidden="true"></i><span>normal</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>reverse</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate-reverse</span></li> </ul> </body> </html>
彈跳小球體驗動畫輪換銜接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } div{ width:100px; height:100px; background:radial-gradient(at center,#ffeb3b,#ff893b); border-radius:50%; animation-name:ball; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse; } section{ width:200px; height:40px; background:rgba(0,0,0,.3); border-radius:50%; position:absolute; transform:translateY(50px); z-index:-1; filter:blur(5px); animation-name:shadow; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse; } @keyframes shadow{ to{ height:20px; background:rgba(0,0,0,.1); filter:blur(35px); } } @keyframes ball{ to{ transform:translateY(-300px); } } </style> </head> <body> <div></div> <section></section> </body> </html>