CSS篇動畫

參考資料：http://isux.tencent.com/css3/index.html?animation-name

1、animation-name

語法：animation-name: none | <identifier> [ , none | <identifier> ]*;定義一個或多個動畫名稱。

檢索或設置對象所應用的動畫名稱，必須與規則@keyframes配合使用，因爲動畫名稱由@keyframes定義如果提供多個屬性值，以逗號進行分隔。

如何開始進行動畫
@keyframes相當於一個命名空間，後面跟一個名詞，如果在class中的animation-name定義了與之對應的name，那麼就可以執行動畫了。定義動畫時，簡單的動畫可以直接使用關鍵字from和to，即從一種狀態過渡到另一種狀態：如：
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
複雜動畫：
@-webkit-keyframes demo{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}

這裏面的百分百有點像flash裏幀的概念。表示設置某個時間段內任意時間點的樣式。

取值
none：不引用任何動畫名稱
identifier：定義一個或多個動畫名稱(identifier標識)

示例：

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>實例</title>													
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.animation_name{
    left:0;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation:0.5s 0.5s ease infinite alternate;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    0%{left:0;}
    100%{left:400px;}
} 
</style>
<div class="demo_box animation_name">看我沒事來回跑</div>                                          				        
</body>
</html>

兼容性

IE	Firefox	Opera	Safari	Chrome
IE 10+	Firefox 3.5+	目前暫無版本支持	Safari 10+	Chrome 2.0+

2、animation-duration

語法：animation-duration: <time>[,<time>]*; 指定對象動畫的持續時間。

說明：檢索或設置對象動畫的持續時間；如果提供多個屬性值，以逗號進行分隔。

取值：<time>：正數，單位可以是秒(s)或者毫秒(ms)。默認值爲0，表明動畫不執行。

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>animation name示例</title>		
<script src="./js/jquery-3.1.1.min.js"></script>											
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.animation_duration{
    left:10px;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s ease 1 forwards;
    -webkit-animation-duration:5s;
    -webkit-animation-name:demo;
    -moz-animation:0.5s ease 1 forwards;
    -moz-animation-name:demo;
    -moz-animation-duration:2s;
}
@-webkit-keyframes demo{
    0%{left:10px;}
    100%{left:400px;}
}
</style>
<div class="demo_box animation_duration">我一共運行了2秒鐘</div>                                          				        </body>
</html>

兼容性

IE	Firefox	Opera	Safari	Chrome
IE 10+	Firefox 3.5+	目前暫無版本支持	Safari 10+	Chrome 2.0+

3、animation-timing-function

說明：檢索或設置對象動畫的過渡類型；如果提供多個屬性值，以逗號進行分隔。

取值：
ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函數，既立方貝塞爾。
linear：線性效果，等同於cubic-bezier(0.0,0.0,1.0,1.0)函數。
ease-in：漸顯效果，等同於cubic-bezier(0.42,0,1.0,1.0)函數。
ease-out：漸隱效果，等同於cubic-bezier(0,0,0.58,1.0)函數。
ease-in-out：漸顯漸隱效果，等同於cubic-bezier(0.42,0,0.58,1.0)函數。
step-start：馬上轉跳到動畫結束狀態。
step-end：保持動畫開始狀態，直到動畫執行時間結束，馬上轉跳到動畫結束狀態。
steps(<number>[, [ start | end ] ]?)：第一個參數number爲指定的間隔數，即把動畫分爲n步階段性展示，第二個參數默認爲end，設置最後一步的狀態，start爲結束時的狀態，end爲開始時的狀態，若設置與animation-fill-mode的效果衝突，而以animation-fill-mode的設置爲動畫結束的狀態。
cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方貝塞爾曲線效果。

兼容性

IE	Firefox	Opera	Safari	Chrome
IE 10+	Firefox 3.5+	目前暫無版本支持	Safari 10+	Chrome 2.0+

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>animation-timing-function示例</title>		
<script src="./js/jquery-3.1.1.min.js"></script>											
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }.demo_box{
    -webkit-animation:f1 2s 0.5s forwards;
    -moz-animation:f1 2s 0.5s forwards;
    position:relative;
    left:10px;
    width:50px;
    height:50px;
    border-radius:50px;
    margin:10px 0;
    overflow:hidden;
}
.ease{ 
    -webkit-animation-timing-function:ease;
    -moz-animation-timing-function:ease;
}
.linear{
    -webkit-animation-timing-function:linear;
    -moz-animation-timing-function:linear;
}
.ease-in{
    -webkit-animation-timing-function:ease-in;
    -moz-animation-timing-function:ease-in;
}
.ease-out{
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
}
.ease-in-out{
    -webkit-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;
}
.step-start{
    -webkit-animation-timing-function:step-start;
    -moz-animation-timing-function:step-start
}
.step-end{
    -webkit-animation-timing-function:step-end;
    -moz-animation-timing-function:step-end;
}
.steps{
    -webkit-animation-timing-function:steps(2);
    -moz-animation-timing-function:steps(2)
}
.cubic-bezier{
    -webkit-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
    -moz-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
}
@-webkit-keyframes f1{
    0%{left:10px;}
    100%{left:500px;}
}
@-moz-keyframes f1{
    0%{left:10px;}
    100%{left:500px;background:#f00}
}                        
                        </style>
<div class="demo_box ease">ease</div>
<div class="demo_box linear">linear</div>
<div class="demo_box ease-in">ease-in</div>
<div class="demo_box ease-out">ease-out</div>
<div class="demo_box ease-in-out">ease-in-out</div>
<div class="demo_box step-start">step-start</div>
<div class="demo_box step-end">step-end</div>
<div class="demo_box steps">steps(2)</div>
<div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>                                      				        </body>
</html>

4、animation-delay

語法：animation-delay: <time>; 指定對象動畫延遲執行的時間。

說明：設置動畫延遲執行的時間。
默認值0表示立即執行，正數爲動畫延遲一定時間，負數爲截斷一定時間內的動畫。單位爲秒(s)或毫秒(s)。

取值：0：不延遲，立即執行。正數：按照設置的時間延遲。負數：設置時間前的動畫將被截斷。

兼容性

IE	Firefox	Opera	Safari	Chrome
IE 10+	Firefox 3.5+	目前暫無版本支持	Safari 10+	Chrome 2.0+

兼容性

兼容性

兼容性

兼容性

待學工具

第一階段-知識體系梳理

金融知識入門之基金基礎概念

Java

CSS3 text-overflow屬性

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

CSS篇 動畫

兼容性

兼容性

兼容性

兼容性

CSS篇動畫