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>