文章目录
- 前言
- 一、过渡
- 二、动画
- 三、变形
- 总结
前言
本文主要和大家介绍CSS中过渡、动画等相关知识点，相关属性有些多，在这里分享给大家~
一、过渡
一般用于hover 效果
相关属性——
1.transition-property: 指定要执行过渡的属性
- 多个属性使用，隔开
- 如果所有属性都需要过渡，则使用 all关键字
- 大部分属性都支持过渡效果，注意过渡时必须是从一个有效值向另外一个有效数值进行过渡——例如，当采取display: none（隐藏且不会占据其位置） 时，使用transition 可能会无效，因为无法对一个本来不存在的元素进行过度
2.transition-duration: 指定过渡效果的持续时间
时间单位： s 和 ms 1s=1000ms
3.transition-timing-function: 过渡的时序函数（指定过渡的执行方式）
可选值
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，再减速
cubic-bezier()来指定时序函数
https://cubic-bezier.com （可以画贝塞尔曲线）
steps()分布执行过滤效果 例如： steps(1) 分一步完成
transition-timing-function: step(2, start);
end，在时间结束时执行过渡（默认值） start，在时间开始时执行过渡
4.transition-delay 过渡效果的延迟，等待一段时间后再执行过渡
总结：transtion:可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，其他属性没有顺序要求。
二、动画
相关属性——
1.animation-name 要对当前元素生效的关键帧的名字
2.animation-duration 动画的执行时间 animation-duration: 4s;
3.animation-delay 动画的延时
4.animation-timing-function: 动画过渡的执行方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，再减速
cubic-bezier()来指定时序函数
5.animation-iteration-count 动画执行次数
可选值： 次数 infinite 无限执行
6.animation-direction 指定动画运行的方向
可选值
normal 默认值，从 from 向 to 运行，每次都是这样
reverse 从 to 向 from 运行 ,每次都是这样
alternate 从 from 向 to 运行，重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行，重复执行动画时反向执行
7.animation-play-state 设置动画的执行状态
可选值
running 默认值，动画执行
paused 动画暂停
8.animation-fill-mode 动画的填充模式
可选值
none 默认值，动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards
总结： animation ，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，其他属性没有顺序要求。
三、变形（transform）
相关属性——
平移
平移 X,Y,Z轴平移
translateX（）沿着x轴方向平移 translateX(100px); translateX50%);
translaterY（）沿着y 轴方向平移 translateY(100px); translateY(50%);
translateZ（） 沿着 z 轴方向平移 translaeZ( 100px); translateZ(50%);
平移元素，百分比是相对于自身计算的
transform: translateX（-50%） translateY(-50%)；
Z轴平移
调整元素和人眼之间的距离（近大远小）
perspetive: 800px; 设置当前网页的视距为800px, 人眼距离网页的距离
transform-origin: 20px 20px; 变形的原点 默认值： center
旋转(rotate)
通过旋转可以元素沿着 x y 或 z 旋转指定的角度
rotateX( ) rotateY (） rotateZ（ ）
transform: rotateZ(45deg); 45 沿着Z轴旋转45度
transform: rotateY(180deg) translateZ(400PX); 距离人眼越来越近
transform: translateZ(400PX) rotateY(180deg); 反之
backface-visibility: hidden/visibility; 隐藏/可见
opacity: 0.7; 为元素设置透明效果；
transform-style: preserve-3d; 设置3D 变形效果
缩放（scale）
对元素进行缩放的函数
scaleX(2) 沿着X轴放大两倍 scale(.2) 缩小两倍
scaleY(2) 沿着Y轴放大两倍
scale（） 双方向的缩放
transfrom: scale(2);
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
