动画
作者: dkvirus 发表于: 2018-06-07 09:48:00 最近更新: 2018-07-05 15:09:54

动画主要有三个属性:transform 控制元素旋转、缩放、位移;transition 控制元素在两个状态之间的过渡效果;animation 提供更丰富的动画定义方式。

一、动画之 transform

1. 旋转(rotate)

1
2
3
div {
transform: rotate(10deg);
}
  • 旋转要写单位 deg,不写的话没效果;
  • 默认是顺时针旋转,如 10deg 是顺时针旋转 10 度,如果要逆时针旋转,写负数 -10deg;

关于 3d 旋转的写法说明 rotate3d(x,y,z,Ndeg):元素沿着 (0,0,0) 和 (x,y,z) 这两个点构成的直线为轴,进行旋转。当N为正数时,元素进行顺时针旋转;当N为负数时,元素进行逆时针旋转。

2. 缩放(scale)

1
2
3
div {
transform: scale(1.1);
}
  • 默认大小是 1,值为 1.1 表示放大原来的 1.1 倍,值为 0.9 表示缩小为原来的 0.9 倍;

3. 偏移(translate)

1
2
3
div {
transform: translateX(100px);
}
  • 值要写单位,表示相对原来位置偏移量;
  • css3 中的坐标系如下图所示,向下是 y 轴正方向。

css3坐标系

4. 3d 动画

4.1 舞台与容器

写 3D 图形我的习惯是建立一个舞台(div.stage),大小不限,垂直水平居中;
还需要一个容器(div.container),容器的作用是作为一个参照物来写其它图形;

1
2
3
4
5
6
7
<div class="stage">
<div class="container">
<div class="shelf shelf-1">第一个</div>
<div class="shelf shelf-2">第二个</div>
<div class="shelf shelf-3">第三个</div>
</div>
</div>

4.2 perspective 属性

给舞台(div.stage)加上 perspective 属性,该值表示使用电脑的人与舞台的距离;

该值越大,说明离的越远,看着 3D 图形也就越小;
该值越小,说明离的越近,看着 3D 图形也就越大。

4.3 perspective-origin 属性

同样是给舞台(div.stage)加上该属性,表示从哪个角度看舞台。默认值 50% 50%; 表示用电脑的人从屏幕正中央去看舞台。

想象一下,学习里举行歌唱比赛,中间的位子没有了,一般在左右两边看表演,perspective-origin 值就可以设置你从哪个角度看表演。

perspective-origin: left center; 在一楼的左边看舞台,perspective-origin: right top; 在二楼的右边俯瞰舞台。

4.4 transform-style 属性

如果要写 3D 图形,请给容器(div.container)加上 transform-style: preserve-3d;,否则浏览器上还会显示平面的,看不出立体效果。

二、动画之 transition

1. 概述

transition 处理元素从一个状态到另一个状态的过渡效果。这里需要两个状态:开始状态结束状态。还需要一个触发事件,通常使用 :hover 选择器,当鼠标移动到元素上时触发。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div {
width: 100px;
height: 100px;
background-color: bisque;
margin: 200px auto;
}
div:hover {
width: 150px;
}
</style>

<div>hello world</div>

上述代码的含义为当鼠标放到 div 上时,div 的宽度变成原来的 1.5 倍。可以看到结果确实变化了,只是瞬间切换两个状态,显得很生硬。使用 transition 属性修改一下,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
div {
width: 100px;
height: 100px;
background-color: bisque;
margin: 200px auto;
}
div:hover {
width: 150px;
transition: width 1s;
}
</style>

<div>hello world</div>

可以看到,当鼠标移到 div 上时,div 变化过程变得平缓,这是 transition: width 1s 导致的,这句代码的意思是在 1s 内实现 width 从 100px(开始状态)到 150px (结束状态)的过渡。

当鼠标从 div 上移开时,发现宽度又很生硬的变化回去了,这显然不是我们想要的。给 div 选择器也加上 transition: width 1s,表示 1s 内实现 width 从 150px (开始状态) 到 100px (结束状态) 的过渡。

transition 运行效果

2. API

transition 有以下几个属性,可以单独写,也可以写在一起。

属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。要记得写单位 s(秒)。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

transition-timing-function 有以下几个值:

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

三、动画之 animation

animation 中文意思 “动画”,是 css 中处理动画效果的一个属性。

1. 基础用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:black; left:0px; top:0px;}
}
div {
position: relative;
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
</style>

<div>hello world!</div>

Step1:使用 @keyframes 定义一个动画,@keyframes 后面跟动画名字,百分号后定义动画运行过程具体时间节点的样式;
Step2:对要做动画的元素设置 animation 属性,引用定义好的动画名字,动画名和动画运行时间必写上。

animation 运行效果

2. 无限运行动画

默认只会运行一次动画。

animation: myfirst 5s 2; 动画运行 2 次;

animation: myfirst 5s infinite; 动画循环运行。

3. 较 transition 的优势

animation transition
可以定义任意时间节点的样式 只能定义开始和结束两个时间节点的样式
可以重复动画次数 只能运行一次动画次数
不需要触发自动运行 必须要事件触发运行,通常为 :hover 选择器触发
首页
友链
归档
dkvirus
动态
RSS