CSS——过渡、动画等相关知识点汇总

文章目录

• 前言
• 一、过渡
• 二、动画
• 三、变形
• 总结

---

前言

     本文主要和大家介绍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提供了大量能使我们快速便捷地处理数据的函数和方法。