53
CSS3簡單動畫
css3的動畫確實非常絢麗！瀏覽器兼容性很重要！。
分享兩個小動畫
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>C3動畫</title> <style> /*****************/ #d1{width:50px;height:50px;background-color:green;float:left; border-radius:50%;} #d2{width:50px;height:50px;background-color:red;float:left; border-radius:50%;position:relative;} @-webkit-keyframes jump{ 0%{transform:rotate(0deg);opacity:1;} 25%{transform:rotate(-10deg);opacity:0.5;} 50%{transform:rotate(0deg);opacity:1;} 75%{transform:rotate(10deg);opacity:0.5;} 100%{transform:rotate(0deg);opacity:1;} } #d1{-webkit-animation:jump 0.3s linear infinite;} @-webkit-keyframes move{ 0%{left:10px;background-color:blue;} 50%{left:800px;background-color:yellow;} 100%{left:10px;background-color:red;} } #d2{-webkit-animation:move 5s linear infinite;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body> </html>
效果如本博客首頁那兩個小圓圈！
需要注意的是：
1、在css裏創建動畫時候要處理兼容性
2、在調用的時候不單要處理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;
還要注意animation：animation-name,animation-duration,animation-timing-function,animation-iteration-count
animation-name:是用來定義一個動畫的名稱
animation-duration是用來指定元素播放動畫所持續的時間長，取值:為數值，單位為s （秒.）其默認值為“0”。
animation-timing-function:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式.
具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~
animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值為數字，其默認值為“1”；infinite為無限次數循環。
最後更新：2017-11-05 12:33:48