CSS3动画、2D、3D转换

CSS3动画、2D、3D转换

我是图片

CSS3过渡效果

CSS3的过渡效果就是一个元素的样式改变时增加的一个动画过程。

transition属性

属性 描述
transition-property 设置过渡的CSS属性
transition-duration 设置过渡的时间
transition-duration 设置过渡的时间
transition-timing-function 过渡效果的速度曲线
transition-delay 过渡的延迟时间

transition-timing-function属性值

属性 描述
linear 匀速运动
ease 逐渐变慢(默认)
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢

cubic-Bezier (n,n,n,n) 贝塞尔曲线

例子

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

div{
width: 100px;
height: 100px;
background: red;
transition-property: width,height,background;
transition-duration: 1s,1s,1s;
transition-delay: 0s,1s,2s;
transition-timing-function: cubic-bezier(.49,-0.21,.54,1.22);
/*简写*/
transition:width 1s cubic-bezier(.49,-0.21,.54,1.22),
height 1s 1s,
background 1s 2s;
}
div:hover{
width: 400px;
height: 400px;
background: blue;
}

CSS3动画效果

创建动画

使用@keyframes创建动画,通过from..to或百分比设置动画关键帧。

1
2
3
4
5
6
7
8
9
10
11
@keyframes move
{
from {top:0px;}
to {top:100px;}
}
@keyframes move
{
0% {top:0px;}
50% {top:50px;}
100% {top:100px;}
}

animation属性

属性 描述
animation-name 动画属性名
animation-duration 设置动画的时间
animation-timing-function 动画的速度曲线
animation-delay 动画的延迟时间
animation-iteration-count 动画执行次数,infinite为无限
animation-direction alternate逆向执行动画
animation-play-state 设置动画运行(running)或暂停(paused)
animation-fill-mode 动画时间之外的状态

animation-fill-mode属性值

属性 描述
none 默认行为
forwards 当动画完成后,保持最后一个属性值。
backwards 在延迟时间时,应用动画第一个属性值。
both forwards、backwards。

结构

1
2
3
<div class="wrap">
<div></div>
</div>

样式

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
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
/*transition: 1s;*/
animation: move 2s linear 0s;
animation-iteration-count: 2;
animation-direction: alternate;

}
.wrap:hover div{
animation-play-state: paused;
}
@keyframes move{
0%{
left: 0;top:0;
}
25%{
left:300px;top: 0px;
}
50%{
left:300px;top: 300px;
}
75%{
left:0px;top: 300px;
}
100%{
left: 0px;top: 0;
}
}

CSS3-2D/3D转换

2D/3D 转换属性

属性 描述
transform 元素的 2D 或 3D 转换
transform-origin 改变被转换元素的位置
transform-style 可设置元素在 3D 空间中显示。
perspective 设置元素的3D效果。
perspective-origin 3D元素的位置。
backface-visibility 设置元素背面是否可见。

2D转换方法

方法 描述
translate(x,y) 元素位置移动
rotate(deg) 元素旋转
scale(x,y) 元素放大缩小
skew(x,y) 元素倾斜
matrix(n,n,n,n,n,n) 把所有转换方法组合在一起

3D转换方法

方法 描述
translate3d(x,y,z) 元素位置移动
rotate3d(x,y,z,deg) 元素旋转
scale3d(x,y,z) 元素放大缩小

###例子

translate方法

结构

1
2
3
<div class="wrap">
<div></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
.wrap{
width: 100px;
height: 100px;
border:5px dashed black;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
transform: translate(105px,50px);
}

效果

我是图片

scale方法

结构

1
2
3
<div class="wrap">
<div></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
width: 100px;
height: 100px;
border:5px dashed black;
margin: 50px auto;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
transform: scale(1.5,1.5);
}

效果

我是图片

rotate方法

结构

1
2
3
4
5
<div class="wrap">
<div class="d1">rotateX</div>
<div class="d2">rotateY</div>
<div class="d3">rotateZ</div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap{
/*设置3d视角距离*/
perspective:1000px;
/*设置为3d模式*/
transform-style: preserve-3d;
width: 500px;
margin: 50px auto;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
float: left;
margin: 0 10px;
transition: 1s;
}
.d1{transform: rotateX(45deg);}
.d2{transform: rotateY(45deg);}
.d3{transform: rotateZ(45deg);}
.d1:hover{transform: rotateX(90deg);}
.d2:hover{transform: rotateY(90deg);}
.d3:hover{transform: rotateZ(90deg);}

效果

我是图片

skew方法

结构

1
2
<div class="d1">skewX</div>
<div class="d2">skewY</div>

样式

1
2
3
4
5
6
7
8
9
div{
width: 100px;
height: 100px;
background: red;
float: left;
margin: 50px 30px;
}
.d1{transform: skewX(30deg);}
.d2{transform: skewY(30deg);}

效果

我是图片

3D动画

结构

1
2
3
<div class="wrap">
<div ></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap{
/*设置3d视角距离*/
perspective:1000px;
/*设置为3d模式*/
transform-style: preserve-3d;
width: 200px;
height: 300px;
border: 5px solid black;
margin: 50px auto;
}
.wrap div{
width: 200px;
height: 300px;
background: red;
transform: translate3d(0px,0px,200px);
animation: move2 10s linear infinite;
}
@keyframes move{
from{transform: rotateY(0deg) translate3d(0px,0px,200px)}
to{transform: rotateY(360deg) translate3d(0px,0px,200px)}
}

效果

我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/03/25/CSS3动画、2D、3D转换/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶