过渡
- 如果两个状态发生变化，没有过渡，效果是瞬间变化的
- 如果加上了过渡，那么这个过程就会有动画的效果
- 整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态和结束状态
语法
- transition： all 1s;
- all代表所有可以过渡的属性（数值属性）都过渡，类似于宽度，高度，颜色等
- 1s代表过渡开始到结束所用时间，时间长，效果就慢
注意
- 一般将过渡加给想过渡的元素的A状态，这样可以完成两次过渡，所有选择器语法使用为：A状态：hover B状态{}
- 若只需要执行一次，则直接给B状态
image.png
2D转换
初步了解
- transform：转换，是CSS3最具颠覆性的几个特性之一，可以用于2D转换和3D转换
- transform：2D 转换，元素在平面上实现移动，旋转，缩放，斜切等操作
translate平移
- transform：translateX(100px);水平方向移动100px
- transform：translateY(100px);垂直方向移动100px
- transform：translate(100px,100px);水平移动100px,垂直移动100px
- transform：translate(50%,50%);水平垂直各移动自身的50%
注意
- translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高
- translate移动的元素并不会影响其他盒子，类似于相对定位
image.png
scale缩放
- transform：scaleX（0.5）；让宽度变化
- transform：scaleY（0.5）；让高度变化
- transform：scale（0.5）；高度宽度同时变化
注意
- scale接收的值是倍数，没有单位
- 一个值代表宽高等比例缩放
- 可以通过transform-origin设定旋转原点
image.png
transform-origin转换原点
- transform-origin:center center;
- transform-origin:50px 50px;
- 可以设置旋转的中心原点，取值为方位名词或者具体坐标
image.png
rotate旋转
- transform：rotate（360deg）;旋转360度
注意
- 单位是deg，角度，不是px
- 正值代表顺时针旋转，负值逆时针
- 可以通过transform-origin设定旋转原点
image.png
skew斜切（变形）
- transform：skewX（30deg）;水平方向倾斜30度
- transform：skewY（30deg）;垂直方向倾斜30度
注意
- 在实际开发中，很少用到一般来说，x和y只会倾斜其中一个
image.png
转换合写问题
- 当一个元素有多个2D转换（即旋转又缩放），采用连写方式
image.png
- 2D转换的顺序不同，结果也不同，主要是针对移动和旋转（物体发生了旋转，内部坐标也发生旋转）
image.png
- 多个状态下面有2D转换效果时，需要复制前面已经存在的效果，否则会默认值覆盖（例如：移动至）
image.png
3D转换
perspective透视
- 语法：perspective：500px;
- 一般取值在500px-1000px之间
注意
- 当为元素设置perspective时，其子元素会获得透视效果，而不是元素本身
rotate旋转
- rotateX代表在X轴旋转（正值推到，负值趴下）
- rotateY代表在Y轴旋转（正值从右推门，负值从左推门）
image.png
- rotateZ代表在Z轴旋转（ 正值向前走，负值向后走）
image.png
- 左手定则：伸出左手，握拳，大拇指代表当前旋转的那个轴（大拇指的朝向就是正方向），其他手指弯曲的方向就是正值旋转方向
注意
- 如果要看到translateZ的视觉效果，就需要添加透视距，没有添加，元素已经执行，只是看不出来
translateZ
- 代表元素的前后关系
- 正值向前走，负值向后走
注意
- 想要看到translateZ的视觉效果，需要添加透视距，没有添加时，已经运行但是看不出来
transform-style
- 属性规定如何在3D空间中呈现被嵌套的元素，这个属性只能给父元素添加
取值
- flat：默认值，2D显示
- preserve-3d：3d显示
注意
transform-style与perspective的区别
透视只是相当于设置了一个距离，辅助我们查看3D效果的工具
给父元素添加，让子元素保留3D位置，只有设置了此属性，元素才能被称为是3D元素
动画
- 可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
动画与过渡的区别
- 过渡必须触发，需要两个状态的改变
- 动画可以一直运行下去，不需要触发，实现效果与过渡差不多
使用一个动画的基本步骤
- 通过@keyframes指定动画序列
- 通过百分比或者from/to将动画分割成多个节点
- 在各个节点分别定义样式
- 通过animation将动画应用于相应的元素
定义基本动画
image.png
定义百分比动画
image.png
animation详解
- animation是一个复合属性，一共有8个参数
- animation-name：动画名称，有@keyframes定义
- animation-duration：动画的持续时间
- animation-timing-function：动画的过渡类型
- animation-delay：动画的延迟时间
- animation-iteration-count：动画的循环次数
- animation-direction：设置动画在循环中是否反向运动
- animation-fill-mode：设置动画时间之外的状态
- animation-play-state：设置动画的状态
image.png
帧动画
使用步骤
- 先确定一个画面的大小，将这个大小作为盒子的大小
- 确定动画的起始画面和结束画面
- 确定一共有多少个画面，steps的取值是总的面数
CSS3私有前缀
- 谷歌，苹果浏览器：-webkit-
- 火狐浏览器：-moz-
- IE浏览器：-ms-
- 欧朋浏览器：-o-
image.png
