CSS动画实用技巧

三个常用动画属性

常用动画属性——transition（过渡）

常用动画属性——animation（动画）

常用动画属性——transform（变换）

语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
ewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

照片墙

实用动画技巧

技巧一、animation-delay：定义动画何时开始。默认为0，立即执行动画；正值，延迟指定时间后，开始执行动画；负值，立即执行，但跳过指定时间后进入动画。

技巧二、妙用border颜色，border-left-color

技巧三、巧用border宽度

设置书本右上边的拆角

类名:hover:befor {

　　border-right-80px;

　　border-bottom-80px;

}

技巧四、实现正圆/椭圆运动效果

正圆（把x变为百分之几百，以具体图片确定，然后进行旋转运行）

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

椭圆

实现弧形运动

hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3 Hover</title>
 6     <style type="text/css">
 7         .demo,.img,.border,.mask{
 8             width: 300px;
 9             height: 300px;
10         }
11         .demo{
12             display: block;
13             position: relative;
14             margin:50px auto;
15         }
16         .img{
17             background-repeat: no-repeat;
18             background-size: cover;
19             background-position: center center;
20             border-radius: 50%;
21         }
22         .border{
23             position: absolute;
24             border: 10px solid #072256;
25             border-left-color:#E07514;
26             border-top-color:#E07514;
27             top: 0;
28             left: 0;
29             border-radius: 50%;
30             -webkit-transition:all .5s ease-in;
31             transition:all .5s ease-in;
32             -webkit-box-sizing:border-box;
33             box-sizing:border-box;
34         }
35         .mask{
36             position: absolute;
37             top: 0;
38             left: 0;
39             border-radius: 50%;
40             -webkit-transition:all .5s ease-in;
41             transition:all .5s ease-in;
42             color:rgba(255,255,255,0);
43         }
44         .demo:hover .mask{
45             background-color:rgba(0,0,0,0.5);
46             color:rgba(255,255,255,1);
47         }
48         .demo:hover .border{
49             -webkit-transform:rotate(180deg);
50             transform:rotate(180deg);
51 
52         }
53         .info{
54             position: absolute;
55             width: 100%;
56             top: 50%;
57             left: 0;
58             text-align: center;
59             -webkit-transform:translateY(-50%);
60         }
61 
62     </style>
63 
64 </head>
65 <body>
66 <a href="#" class="demo">
67     <div class="img" style="background-image:url(http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg)"></div>
68     <div class="mask">
69         <div class="info">
70             <h3>BEATIFUL DAY</h3>
71             <p>Description goes here</p>
72         </div>
73     </div>
74     <div class="border"></div>
75 </a>
76 </body>
77 </html>

hover.html