【前端】CSS3动画

2D 变换

2D 变换有三种形式：

translate：平移
rotate：旋转
scale：伸缩

可以同时使用多个形式

2D 变换-平移

语法格式：transform: translate(x, y)，

x、y 的单位可以是px，也可以是百分比，当值是百分比时，表示自身宽度/高度的比例

也可以分开写：translateX()/translateY()

注意事项：

translate 对行内标签没有作用
translate(x, y)表示相对于父元素移动的距离，且是一种声明式写法
translate 最大的特点：不会影响其他元素的位置(不脱标)

2D 变换-旋转

语法格式：transform: rotate(60deg)，单位是deg

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

2D 旋转-中心点

语法格式：transform-origin: x y;

注意事项：

的参数 x 和 y 用空格隔开，单位可以是px/百分比/方位名词
x y 默认转换的中心点是元素的中心点 (50% 50%)
可以给 x y 设置像素或者方位名词 （top bottom left right center）

2D 变换-伸缩

语法格式：transform:scale(x,y);

注意事项：

宽和高都放大一倍，相对于没有放大
只写一个参数，第二个参数则和第一个参数一样
sacle 缩放最大的优势：默认以中心点缩放的，而且不影响其他盒子(不脱标)

CSS 动画

制作动画可以分为两部：

定义
调用

动画的定义

语法格式：

1
2
3
4
5
6
7
8


@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

注意事项：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列(关键帧)
用关键词from和to，等同于0%和100%
在0%和100%中间可以随意定义多个百分比关键帧

动画的调用

在需要使用该动画的元素上加上animation-name、animation-duration等属性

动画常用属性：

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写
animation-name	动画名称
animation-duration	动画持续时间
animation-time-function	动画速度曲线，默认是`ease`，还有`liner/steps/ease-in`等属性
animation-delay	动画何时开始
animation-iteration-count	动画播放次数，默认是`1`，还有`infinite`
animation-direction	是否在下一个周期逆向播放，默认值是`normal`，还有`alternate`(逆向播放)
animation-fill-mode	规定动画结束之后保持`forwards`，回到起点`backwards`
animation-play-state	动画播放状态，`running/paused`

3D 变换

3D 变换有三种形式：

translate3d：3D 平移
rotate3d：3D 旋转

3 维坐标系

三维坐标系其实就是指立体空间，立体空间是由 3 个轴共同组成的。

x 轴：水平向右注意： x 右边是正值，左边是负值
y 轴：垂直向下注意： y 下面是正值，上面是负值
z 轴：垂直屏幕注意：往外面是正值，往里面是负值

因为 z 轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

透视 perspective

perspective在 2D 平面产生近大远小视觉立体，但是只是效果二维的

注意事项：

视距应该给父元素/祖元素添加
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是px

3D 变换-平移

语法格式：transform:translate3d(x,y,z)

也可以分开写：translateX/translateY/translateZ

3D 变换-旋转

语法格式：transform:rotate3d(x,y,z,deg)，了解即可

也可以按照坐标轴旋转：rotateX(45deg)/rotateY(45deg)/rotateZ(45deg)

注意事项：

旋转方向遵循左手准则

3D 呈现 transfrom-style

给父元素添加变换属性时，子元素的变换属性可能失效

为了保持子元素 3D 变换效果，应该给父元素添加transfrom-style: preserve-3d;属性(默认值是flat)

私有浏览器前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

私有前缀：

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性