css3的動畫功能有以下三種:
1、transition(過度屬性)
2、animation(動畫屬性)
3、transform(2D/3D轉換屬性)
下面逐一進行介紹我的理解：
1、transition:<過渡屬性名稱> <過渡時間> <過渡模式>
如-webkit-transition:color 1s;
等同于:
-webkit-transition-property:color;
-webkit-transition-duration:1s;
多個屬性的過渡效果可以這樣寫：
方法1：-webkit-transition:<屬性1> <時間1> ,<屬性2> <時間2> ,。。。
方法2：
-webkit-transition:<屬性1> <時間1>;
-webkit-transition:<屬性2> <時間2>;
transition-timing-function屬性值有5個:
ease:緩慢開始，緩慢結束
liner:勻速
ease-in:緩慢開始
ease-out:緩慢結束
ease-in-out:緩慢開始，緩慢結束（和ease稍有區別）
實例：
transition過渡效果
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition過渡效果</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
left: 0px;
top: 0px;
transition: top 5s ease,left 5s ease ;
-moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
-webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
新聞熱點
疑難解答
