CSS3 动画

transition 过渡动画

transition-property 过度属性 all[attr]
transition-dunration 过度时间
transition-delay 延迟时间
transition-timing-function 运动类型

ease:（逐渐变慢）默认值
linear:（匀速）
ease-in:（加速）
ease-out:（减速）
ease-in-out:（先加速后减速）
cubic-bezier 贝塞尔曲线 (x1,y1,x2,y2)
- http://cubic-bezier.com/

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style>
    #div{
        width: 100px;
        height:100px;
        background: red;
        transition:width 1s 1s;
        /* 延迟的一秒 */
    }
    #div:hover{
        width: 300px;
        transition:width 1s 1s;
        /* 延迟的一秒 */
    }
    </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

项目案例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style>
        /* 过渡动画效果思考的步骤
            1.找到过渡属性
            2.找到过渡属性起始值和结束值
            3.在合适的位置上增加transition属性

            过渡属性 box-shadow
            起始值 30px transparent
            结束值 0   white
        */
        body{
            background:#2192bc;
        }
        .box{
            width: 100px;
            height: 100px;
            background: #2c9dc4 url("./1991841492744344.jpg") no-repeat center center;
            border-radius: 50%;
            margin: 100px auto;
            box-shadow: 0 0 0 30px transparent;
            -o-transition: box-shadow 1s;
            -ms-transition: box-shadow 1s;
            -moz-transition: box-shadow 1s;
            -webkit-transition: box-shadow 1s;
            transition: box-shadow 1s;
        }
        .box:hover{
            box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

transform 2D 变换

rotate() 旋转函数

deg 度数
transform-origin 旋转的基点

skew() 倾斜函数

skewX()
skewY()

scale() 缩放函数默认值是 1

scaleX()
scaleY()

translate() 位移函数

translateX()
translateY()

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style>
       #div1{
           width: 200px;
           height: 300px;
           border: 1px solid red;
       }

       #div1 img{
           width:100%;
           height: 100%;
           transition: all 1s;
       }

       #div1:hover img{
           transform: skew(-15deg,15deg);
       }
    </style>
</head>
<body>
    <div id="div1">
        <img src="./1991841492744344.jpg" alt="" srcset="">
    </div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

animation 帧动画

关键帧 --

类似于 flash 定义动画在每个阶段的样式，即帧动画

关键帧的时间单位

数字：0%、25%、100% 等（设置某个时间段内的任意时间点的样式）
字符：form(0%)、to(100%);

格式

javascript

@keyframes 动画名称
{
	动画状态
}

1
2
3
4

html

<!DOCTYPE html>
<html>
<head>
<style>
div
{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	from {background:red;}
  to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
	from {background:red;}
	to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

格式

css

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

transform3d 变形

1.3d 和2d不同点是多了一个z轴,2d都是一些平移效果，3d可以让它按照轴为中心旋转
2.为了增加空间想象多了一个左手法则
解释：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向
前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、
Y、Z轴的正方向。如下图

1
2
3
4
5

方向判断的口诀

x左边是负的，右边是正的
y上面是负的， 下面是正的
z里面是负的， 外面是正的

1
2
3

rotateX()

1.就是沿着 x 立体旋转.例如transform:rotateX(180deg);旋转时候也是图片中
心为轴旋转

1
2

rotateY()

1.就是沿着 y 立体旋转.例如transform:rotateY(180deg);旋转时候也是图片中
心为轴旋转

1
2

rotateZ()

1.就是沿着 z 立体旋转.例如transform:rotateZ(180deg);旋转时候也是图片中
心为轴旋转

1
2

移动 translateX(x)/translateY(y)/translateZ(z)

1.3d比2d 移动多了一个 translateZ(z)
2.[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本
身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
3.简写：translate3d(x,y,z)

1
2
3
4

透视 -- perspective

1.电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
2.透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
3.并非任何情况下需要透视效果，根据开发需要进行设置。
4.perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

1
2
3
4
5
6
7

使用透视案例

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;  /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
<img src="images/x.jpg" alt=""/>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

元素不面向屏幕时是否可见 -- backface-visibility

1.backface-visibility 属性定义当元素不面向屏幕时是否可见。

反转盒子案例

css

div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s;
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
		}
		div:hover img {
			transform: rotateY(180deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

案例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: url('http://pic22.nipic.com/20120725/9676681_001949824394_2.jpg') no-repeat;
            background-size: cover;
            position: relative;
            perspective: 1000px;  /*给父盒子添加透视效果 一定要加透视效果*/
        }
        .ldoor,.rdoor{
            position: absolute;
            background-color: red;
            border:1px solid #000;
            top:0;
            width: 250px;
            height: 500px;
        }
        .ldoor{
            transform-origin: left;/*旋转轴*/
            left: 0;
        }
        .rdoor{
            transform-origin: right;/*旋转轴*/
            right: 0;
        }
        /*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/
        section:hover .ldoor {
            transform: rotateY(-130deg);  /*因为往左边翻转，所以是负值*/
        }
        section:hover .rdoor {
            transform: rotateY(130deg);
        }
    </style>
</head>
<body>
<section>
    <div class="ldoor"></div>
    <div class="rdoor"></div>
</section>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

CSS3 动画 #

transition 过渡动画 #

项目案例 #

transform 2D 变换 #

rotate() 旋转函数 #

skew() 倾斜函数 #

scale() 缩放函数 默认值是 1 #

translate() 位移函数 #

animation 帧动画 #

关键帧 -- #

关键帧的时间单位 #

格式 #

transform3d 变形 #

rotateX() #

rotateY() #

rotateZ() #

移动 translateX(x)/translateY(y)/translateZ(z) #

透视 -- perspective #

使用透视案例 #

反转盒子案例 #

案例 #

CSS3 动画

transition 过渡动画

项目案例

transform 2D 变换

rotate() 旋转函数

skew() 倾斜函数

scale() 缩放函数默认值是 1

translate() 位移函数

animation 帧动画

关键帧 --

关键帧的时间单位

格式

transform3d 变形

rotateX()

rotateY()

rotateZ()

移动 translateX(x)/translateY(y)/translateZ(z)

透视 -- perspective

使用透视案例

反转盒子案例

案例