transition、transforms和animation
Rio 2023-01-09
css
总览
transition、transforms和animation的笔记总结
CSS 动画 transition 和 transforms，并不会自动使用 GPU 来处理，而是通过浏览器软件的渲染引擎来处理的
# transition过渡
过渡transition是一个复合属性
提供了一种在更改css属性时控制动画速度的方法。可以让css属性变化成为一个持续一段时间的过程，而不是立即生效的;只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态，对数值类属性有效
在不使用transition时，若通过用户的交互直接改变css样式属性，呈现的形式是立刻转变，但有时我们希望这个变化是有过渡效果的，这时就可应用transition过渡动画了。
transition的这四个子属性之间不能用逗号隔开，只能用空格隔开 ，这四个子属性只有<transition-duration>是必需值且不能为0
transition-property: 需要过渡的属性(默认值为all)
transition-duration: 过渡持续时间,默认值为0s,也就是说，如果不设置该属性，默认是没有过渡效果的
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
.box{
position: relative;
left: 0;
width: 200px;
height: 100px;
background-color: pink;
transition: left 1s ease-in;
}
.box:hover{
left: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# transform形变
transform属性允许对某一个元素进行某些形变,包括旋转，缩放，倾斜或平移等。
变形可以实现2D和3D两种效果。
并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变span a strong)
- 平移: translate(x, y)
width: 200px;
height: 200px;
background-color: orange;
transform: translate(100%,100px);
/* 百分号参照的是元素自身, 100% 即向x轴平移200px */
1
2
3
4
5
2
3
4
5
- 缩放: scale(x, y)
transform: scale(0.6,0.1);
/* 大于1放大小于1缩小 */
1
2
2
- 旋转: rotate(deg)
transform-origin: 20px 20px;
/* 改变形变的原点位置 一个值只设置x */
transform: rotate(45deg);
/* 正数顺时针，负数逆时针 */
1
2
3
4
2
3
4
- 倾斜:skew(deg, deg)
transform: skew(10deg);
1
注意css覆盖
[
transform: rotate(45deg);
transform: scale(0.6,0.1); /* 覆盖了旋转 */
]
transform: rotate(45deg) scale(0.6,0.1); /* 正确写法 */
1
2
3
4
5
2
3
4
5
# animation动画
- 使用keyframes定义动画序列(每一帧动画如何执行)
- 配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
- 0%表示动画的第一时刻，100%表示动画的最终时刻;
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: move 3s ease-in 1s 2 normal forwards;
animation-iteration-count: 2; 表示动画执行次数，infinite表示无限执行
animation-direction: normal; 表示方向，常用值normal和reverse
animation-fill-mode: forwards; 表示动画结束元素的最终位置， forward表示停留在动画最后一帧的位置
1
2
3
4
5
6
2
3
4
5
6
