过渡transition
1.过渡的概念
过渡让一个元素在“不同状态之间”在一个时间下切换效果的。
状态比如改变伪类切换状态。
transition 过渡属性，是一个简写的属性，平时就用简写的。
2.属性的拆分 (了解)
|
属性
|
描述
|
值
|
| transition-property |
需要过渡的属性名称
|
默认all可以省略
|
|
transition-duration
|
过渡所需要的时间
|
时间s必写
|
|
transition-delay
|
过渡的延迟时间，简写的时候必须写在过渡时间之后
|
时间s
|
|
transition-timing-function
|
过渡效果运用的方式
|
默认ease
|
3.简写的过渡 (重点)
|
transition：过渡样式 过渡时间 延迟时间 过渡方式；
|
值得顺序，除了过渡时间和延迟时间不能调整前后顺序之外，其他都可以。
|
transition：过渡时间；
|
简写过渡时间即可，其他值用的都是默认值，all过渡样式，0s延迟时间，ease过渡方式的。
4.过渡顺序
多组过渡需要用逗号相连，后一组需要等待前面的过渡时间之和 作为延迟时间等待
transition: width 1s, height 1s 1s, border-radius 1s 2s;
5.可以过渡的样式列表
不是所有属性都可以使用过渡，所以参考以下列表
6.变换
1.变换的基本概念
transform变换属性，允许元素旋转，缩放，平移，扭曲。变换属性需要用到一个或者多个变换函数。函数的执行从左向右。
优势：
渲染机制，比js逻辑要快
针对移动端友好
实际尺寸和原位置不会变化，不会影响其他元素的位置
劣势：
再快也有一个时间加载
写起来相对单词多一些
设计费时间 (比js省时间)
元素旋转边沿会产生锯齿或者虚化的效果
元素使用变换属性它的基础点是元素的中心点，不是左上角的原点 (基础点可以改)
2.位移函数
translate( ) 函数代表元素可以在页面中位移
/* 沿着x轴方向移动，正值向右，负值向左 */
transform：translateX(100px);
/* 沿着y轴反向移动，正值向下，负值向上 */
transform：translateY(100px)；
/* 沿着x轴和y轴同时移动*/
transform：translate(100px,100px);
3.旋转函数
rotate( ) 旋转函数，可以让元素围绕自己的基础点进行角度的旋转，角度的单位是deg，角度可以是0-360deg，可以是负值。
/* 正值是顺时针旋转，负值时逆时针旋转 */
transform：rotate(-45deg);
/* 沿着x轴水平轴旋转*/
transform: rotateX(30deg);
/* 沿着y轴垂直轴旋转*/
transform: rotateY(30deg);
4.缩放函数
scale( ) 它可以允许元素使用缩放比例，无需单位。
(1) 放大和缩小
正常不放大不缩小比例是1
/* 放大 只要比1大的数字就是放大比例 */
transform: scale(1.5);
/* 0 值代表缩小到完全看不到 */
transform: scale(0);
/* 0-1不包含0和1 是缩小倍数*/
transform: scale(0.5);
/* 单独一个轴放大缩小也可以 */
transform: scaleX(2);
transform: scaleY(2);
(2) 翻转效果
/* x，y轴都镜面翻转 */
transform: scale(-1);
/* x轴镜面翻转 */
transform: scaleX(-1);
/* y轴镜面翻转 */
transform: scaleY(-1);
5.扭曲
skew( ) 二维平面上的一个倾斜的角度。使用的是角度单位0-360deg。可以是负值。
transform: skew(40deg,-70deg);
transform: skewX(40deg);
transform: skewY(-40deg);
6.变换函数的执行顺序
使用多个变换函数的时候，是有渲染顺序的，从前向后渲染。如果调整函数的顺序，结果将不同。
7.变换的基点
transform-origin 代表变换属性中基点的修改，默认是center，可以使用关键词，百分比，以及像素更改基点的位置。
动画
1.动画和关键帧的关系
animation 运行一个关键帧动画效果，关键需要动画的关键帧名和时间 (基础需求)、
@keyframes 关键帧规则。它来控制css动画序列。简单说就是步骤。
2.关键帧@keyframes
关键帧的创建并不依赖某个元素，可以直接利用语法创建，由一个或者多个元素使用。百分比的动作是分配执行动画的时间
@keyframes move1 {
/* 0%没有任何动作的第一帧 */
0% {
transform: translateX(0);
}
/* 可以通过百分比调整全套动作的某个位置的css变化 */
/* 100%完成所有动作的最后一个静止帧 */
100% {
transform: translateX(300px);
}
}
3.动画属性的拆分 (了解)
|
属性
|
属性描述
|
描述
|
常用值
|
|
animation-name
|
动画名称
|
要执行的关键帧名字
|
自定义
|
|
animation-duration
|
执行时间
|
一个动画的完整执行时间
|
0s
|
|
animation-delay
|
延迟时间
|
延迟执行动画的时间
|
0s
|
|
animation-timing-function
|
执行方式
|
动画执行的贝塞尔曲线
|
ease
|
|
animation-iteration-count
|
执行次数
|
动画执行几次，直接写数字
|
1
|
|
animation-direction
|
执行顺序
|
动画按照关键帧的什么顺序执行
|
normal默认正常序列，reverse反序列
|
|
animation-fill-mode
|
停留位置
|
“一组”动画执行完成后停留的位置
|
默认none，forwards停留在最后一帧的位置(无限循环失效)
|
|
animation-play-state
|
动画当前的播放状态
|
可以通过伪类改变播放状态，如暂停和运行
|
默认值running，paused暂停
|
4.简写动画属性
直接使用animation属性。
除了执行时间必须在延迟时间之前，其他无顺序。
animation：ball 3s 0s 2 none reverse linear running;
极简写法
关键帧名和执行时间(必写)
animation：ball 3s；
浙公网安备 33010602011771号