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>