css3 動畫
阿新 • • 發佈：2020-08-23
目錄
使元素從一種樣式逐漸變化為另一種樣式的效果。
相容性
IE10+、 FireFox6+ Chrome43+、 Safari!9+、 Opera30+、 Android -webkit-
animation-name
檢索或設定物件所應用的動畫名稱。某種意義來說算是一種識別符號。
語法：animation-name: keyframename none;
- keyframename:指定要繫結到選擇器的關鍵幀的名稱
- none:指定有沒有動畫(可用於覆蓋從級聯的動畫)。
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style type="text/css"> * { margin: 0 auto; padding: 0 auto; } div > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 300px; margin: 10 auto; background-repeat: no-repeat; background-position: center; } div > .inner { background: url(./brid.png); background-size: cover; animation-name: circle_mouse; height: 300px; } div > .outer { background: url(./circle.png); background-size: contain; animation-name: circle_outer; } @keyframes circle_mouse { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes circle_outer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <body> <div> <div class="inner"></div> <div class="outer"></div> </div> </body> </html>