css3 炫酷的動畫transform, transition, animation

元素的變形-transform屬性

1. 旋轉

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);

2. 縮放和翻轉

-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);

3. 移動

-webkit-transform:translate(10px,5px);
-moz-transform:translate(10px,5px);
-o-transform:translate(10px,5px);
-ms-transform:translate(10px,5px);
transform:translate(10px,5px);

4. 傾斜

-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
-ms-transform:skew(-30deg);
transform:skew(-30deg);

5. 矩陣變形

-webkit-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-moz-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-o-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-ms-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
transform:matrix(0.866,0.5,0.5,-0.866,10,10);

6. 同時使用多個變形函數

-webkit-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-moz-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-o-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-ms-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
transform:translate(10px,10px) rotate(30deg) scale(1,-1);

7. 定義變形原點--transform-origin屬性

li a {
     display:block;
     padding:5px 10px;
     color:#333;
     text-decoration:none;
     /* 變形原點：自定義*/
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -o-transform-origin:0 0;
    -ms-transform-origin:0 0;
     transform-origin:0 0;
}

li:hover a {
     background-color:#f90;
     color:#fff;
     /* 變形方式： 旋轉*/
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -o-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}

css3 過渡效果--transition

實現過渡效果--transition屬性
transition: transition-property || transition-duration || transition-timing-function || transition-delay

1. transition-property:none | all |

// none 表示沒有任何css 屬性有過渡效果
// all 爲默認值，表示全部的css屬性都有過渡效果
// property 指定一個用逗號分隔的多個屬性，針對指定的這些屬性有過渡效果
/*設置過渡屬性*/
-webkit-transition-property:-webkit-transoform;
-moz-transition-property:-webkit-transoform;
-o-transition-property:-webkit-transoform;
transition-property:-webkit-transoform;

2. transition-duration: // 用於定義過渡過程當中須要的時間

/* 設置多個過渡屬性*/
-webkit-transition-duration:4s, 1s;
-moz-transition-duration:4s, 1s;
-o-transition-duration:4s, 1s;
transition-duration:4s, 1s;

3. transition-delay: // 用於定義過渡的延遲時間

/*設置延遲時間*/
-webkit-transition-delay:500ms;
-moz-transition-delay:500ms;
-o-transition-delay:500ms;
transition-delay:500ms;

4. transition-timing-function: ease | linear | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

linear: 表示過渡一直是一個速度
ease: 表示過渡的速度先慢，再快，最後很是慢。
ease-in: 表示過渡的速度先慢，後愈來愈快，直至結束。
ease-out:表示過渡的速度先快，後愈來愈慢，直至結束。
ease-in-out:表示過渡的速度在開始和結束時，都很慢。
cubic-bezier(n,n,n,n):自定義貝塞爾曲線效果，其中的4個參數爲0到1的數字。

過渡效果實例：

div {
     margin:100px auto;
     width:200px;
     height:100px;
     background-color:#00f;
     /*設置過渡效果*/
    -webkit-transition:all 1000ms linear 500ms;
    -moz-transition:all 1000ms linear 500ms;
    -o-transition:all 1000ms linear 500ms;
    transition:all 1000ms linear 500ms;
}

div:hover {
    background-color:#f90;
    /*設置變形：旋轉240deg*/
    -webkit-transform:rotate(240deg);
    -moz-transform:rotate(240deg);
    -o-transform:rotate(240deg);
    transform:rotate(240deg);
}

css3動畫設計--animation

div {
    position:absolute;
    -moz-animation:mymove 5s infinite;
    -webkit-animation: mymove 5s infinite;
}

@-moz-keyframes mymove{
   0% {top:0px;}
   25% {top:200px; left:200px;}
   75% {top:50px; left:10px;}
   100% {top:100px; left:60px;}
}
@-webkit-keyframes mymove{
   0% {top:0px;}
   25% {top:200px; left:200px;}
   75% {top:50px; left:10px;}
   100% {top:100px; left:60px;}
}

動畫的實現--animation屬性

animation: <name><duration><timing-function><delay><iteration-count><direction>

1. animation-name:<keyframename>| none
2. animation-duration:<time> // 定義動畫播放的週期時間
3. animation-timimg-function:  ease | linear | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
linear: 表示過渡一直是一個速度
ease: 表示過渡的速度先慢，再快，最後很是慢。
ease-in: 表示過渡的速度先慢，後愈來愈快，直至結束。
ease-out:表示過渡的速度先快，後愈來愈慢，直至結束。
ease-in-out:表示過渡的速度在開始和結束時，都很慢。
cubic-bezier(n,n,n,n):自定義貝塞爾曲線效果，其中的4個參數爲0到1的數字。

4. animation-delay: <time>指定播放動畫的時間長度
5. animation-iteration-coumt:infinite | <n> // 定義動畫循環播放的次數。
6. animation-direction:normal | alternate

實例

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>effect</title>
     <style type="text/css">
     .img {
          width: 510px;
          height: 318px;
          -webkit-transform-origin:42 90;
         -moz-transform-origin:42 90;
         -o-transform-origin:42 90;
         -ms-transform-origin:42 90;
          transform-origin:42 90;
         -moz-animation:mymove 5s ease-out 1;
            -webkit-animation: mymove 5s ease-out 1;
     }

     @-moz-keyframes mymove {
          25% {-moz-transform:scale(1.5);}
          50% {-moz-transform:scale(2);}
          100% {-moz-transform:scale(2.5);}
     }
     @-webkit-keyframes mymove {
          25% {-webkit-transform:scale(1.5);}
          50% {-webkit-transform:scale(2);}
          100% {-webkit-transform:scale(2.5);}
     }
     </style>
</head>
<body>
<img src="img/1.jpeg" width="510" height="318" class="img" />    
</body>
</html>