CSS3 动画animation 过渡 transition 2D转换transform:translate （互相可以搭配使用-效果更炫酷）

 

动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash 动画，和 Javascripts。

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。

　

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #animated_div {
            animation: animated_div 5s infinite;
            -moz-animation: animated_div 5s infinite;
            -webkit-animation: animated_div 5s infinite;
            height: 50px;
            width: 100px;
            position: fixed;
        }
        @keyframes animated_div {
            0% {
                left: 0px;
            }
            20% {
                left: 50px;
                background-color: green;
            }
            40% {
                left: 140px;
                background-color: red;
            }
            60% {
                left: 280px;
                background-color: yellow;
            }
            80% {
                left: 425px;
                background-color: blue;
            }
            100% {
                left: 0px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <div id="animated_div"></div>
    <script>
        /*
         
        注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
        Chrome 和 Safari 需要前缀 -webkit-。
 
        常用属性
        属性  描述  CSS
        @keyframes  规定动画。   3
        animation   所有动画属性的简写属性，除了 animation-play-state 属性。 3
        animation-name  规定 @keyframes 动画的名称。    3
        animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0。   3
        animation-timing-function   规定动画的速度曲线。默认是 “ease”。   3
        animation-delay 规定动画何时开始。默认是 0。 3
        animation-iteration-count   规定动画被播放的次数。默认是 1。   3
        animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。  3
        animation-play-state    规定动画是否正在运行或暂停。默认是 “running”。    3
 
         */
    </script>
</body>
</html>

　　

 

过渡效果

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

尽管 CSS3 过渡效果是足够的过渡的一个元素,但是 text-transform 属性可以提高 CSS3 过渡效果的风格。

主要有四个属性的CSS3转换效果,已被描述如下:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

https://www.bookstack.cn/read/css3-tutorial/docs-Transitions%20Effect.md

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡效果 | www.waylau.com</title>
    <meta name="description" content="过渡效果">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
 
    <style>
        .example {
            width: 100px;
            height: 100px;
            background: red;
            transition-property: width;
            transition-duration: 1s;
            /* inear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) */
            transition-timing-function: linear;
            /* 规定过渡效果何时开始。默认是 0。 */
            transition-delay: 2s;
            /* Safari */
            -webkit-transition-property: width;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: linear;
            -webkit-transition-delay: 2s;
        }
 
        .example:hover {
            width: 200px;
        }
 
        #example {
            position: relative;
            width: 530px;
            height: 530px;
            margin: 0 auto 10px;
            padding: 10px;
        }
 
        .childbox {
            font-size: 12px;
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background-color: #ccc;
        }
 
        .childbox p {
            text-align: center;
            padding-top: 10px;
        }
 
        #ease.childbox {
            -webkit-transition: all 4s ease;
            -moz-transition: all 4s ease;
            -o-transition: all 4s ease;
            transition: all 4s ease;
            border: 1px solid #ff0000;
        }
 
        #ease_in.childbox {
            -webkit-transition: all 4s ease-in;
            -moz-transition: all 4s ease-in;
            -o-transition: all 4s ease-in;
            transition: all 4s ease-in;
            border: 1px solid #00ffff;
        }
 
        #ease_out.childbox {
            -webkit-transition: all 4s ease-out;
            -moz-transition: all 4s ease-out;
            -o-transition: all 4s ease-out;
            transition: all 4s ease-out;
            border: 1px solid #f5f5f5;
        }
 
        #ease_in_out.childbox {
            -webkit-transition: all 4s ease-in-out;
            -moz-transition: all 4s ease-in-out;
            -o-transition: all 4s ease-in-out;
            transition: all 4s ease-in-out;
            border: 1px solid #f209f3;
        }
 
        #linear.childbox {
            -webkit-transition: all 4s linear;
            -moz-transition: all 4s linear;
            -o-transition: all 4s linear;
            transition: all 4s linear;
            border: 1px solid #ddddff;
        }
 
        #custom.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -o-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            border: 1px solid #cfdf44;
        }
 
        #negative.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -moz-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -o-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            border: 1px solid #000;
        }
 
        #steps-start.childbox {
            -webkit-transition: all 4s steps(4, start);
            -moz-transition: all 4s steps(4, start);
            -o-transition: all 4s steps(4, start);
            transition: all 4s steps(4, start);
            border: 1px solid #ff0;
        }
 
        #steps-end.childbox {
            -webkit-transition: all 4s steps(4, end);
            -moz-transition: all 4s steps(4, end);
            -o-transition: all 4s steps(4, end);
            transition: all 4s steps(4, end);
            border: 1px solid #0f0;
        }
 
        #example:hover .childbox, #example.hover_effect .childbox {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-transform: rotate(720deg);
            -moz-transform: rotate(720deg);
            -o-transform: rotate(720deg);
            -ms-transform: rotate(720deg);
            transform: rotate(720deg);
            margin-left: 420px;
            background-color: #fff;
        }
 
    </style>
 
</head>
<body>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
 
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
 
<div class="example"></div>
 
<p>Hover on object to see it in action</p>
 
<div id="example">
    <div id="ease" class="childbox"><p>CSS3</p></div>
    <div id="ease_in" class="childbox"><p>CSS3</p></div>
    <div id="ease_out" class="childbox"><p>CSS3</p></div>
    <div id="ease_in_out" class="childbox"><p>CSS3</p></div>
    <div id="linear" class="childbox"><p>CSS3</p></div>
    <div id="custom" class="childbox"><p>CSS3</p></div>
    <div id="negative" class="childbox"><p>CSS3</p></div>
    <div id="steps-start" class="childbox"><p>CSS3</p></div>
    <div id="steps-end" class="childbox"><p>CSS3</p></div>
</div>
 
</body>
</html>

　　

2D 转换

CSS3 2D转换，我们可以斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)元素。

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

rotate()方法，在一个给定度数沿着元素中心顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

  1. .matrix
  2. {
  3. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  4. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  5. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  6. }

 

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D translate | www.waylau.com</title>
    <meta name="description" content="2D translate">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
 
    <style>
        div {
            float:left;
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }
 
        .translate {
            transform: translate(50px, 100px);
            -ms-transform: translate(50px, 100px); /* IE 9 */
            -webkit-transform: translate(50px, 100px); /* Safari and Chrome */
        }
 
        .rotate
        {
            transform:rotate(30deg);
            -ms-transform:rotate(30deg); /* IE 9 */
            -webkit-transform:rotate(30deg); /* Safari and Chrome */
        }
 
        .scale
        {
            transform: scale(2,4);
            -ms-transform: scale(2,4); /* IE 9 */
            -webkit-transform: scale(2,4); /* Safari and Chrome */
        }
 
        .skew
        {
            transform:skew(30deg,20deg);
            -ms-transform:skew(30deg,20deg); /* IE 9 */
            -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
        }
 
        .matrix
        {
            transform:matrix(0.866,0.5,-0.5,0.866,0,0);
            -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
            -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
        }
    </style>
</head>
<body>
 
<div>This is a DIV element.</div>
 
<div class="translate">This is a translate DIV element.</div>
 
<div class="rotate">Hello. This is a rotate DIV element.</div>
 
<div class="scale">Hello. This is a scale DIV element.</div>
 
<div class="skew">Hello. This is a skew DIV element.</div>
 
<div class="matrix">Hello. This is a matrix DIV element.</div>
</body>
</html>

　　

transition基础和写法

?
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
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #000;
        }
        .demo-1 {
            /* // sass写法 */
            /* &:hover{
 
            } */
            /* transition: width 1s linear 0s;  */
            /* transition: width 1s ease;  */
            transition: transform 1s ease-out;
        }
        /* 相当于 */
        .demo-1:hover {
            /* width: 500px; */
            /* 旋转45度角 */
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box demo-1">
    </div>
    <script>
        /*
        Transition基础和写法
        --属性名称(property)
        --过度时间(duration)延迟时间(delay)
        --时间函数(timing-function)
         
        */
        /*
        实用小帖
        1.display不能和transition一起使用
        2.transition后面尽量不要跟all
        3.常见闪动，我们可以perspective和backface-visibility
 
         
         */
    </script>
</body>
</html>

 

posted @   小白咚  阅读(593)  评论(2)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛