前端CSS学习笔记之过渡和动画

前端CSS学习笔记之过渡和动画

1、CSS过渡-Transitions

​ CSS transition提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

1、过渡三要素

​ 1、必须要有属性发生变化、

​ 2、必须告诉系统哪个属性需要执行过渡效果

​ 3、必须告诉系统过渡效果持续时长

2、过渡触发

​ 1、:hover 鼠标悬停触发

​ 2、:active 用户单击元素并按住鼠标是触发

​ 3、:focus 获得焦点时触发

​ 4、@media 触发符合媒体查询条件时的触发

​ 5、点击事件 用户点击元素时触发

3、transition-property 规定应用过渡的CSS属性名称

​ none 没有属性会获得过渡效果

​ all 所有属性都会获得过渡效果

​ property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

4、transition-duration 定义过渡效果花费的时间

​ time 规定完成过渡效果需要花费的时间(以秒或毫秒)，默认值是0，意味不会有效果。

5、transition-timing-function 规定过渡效果的时间曲线

​ linear 规定以相同的速度开始至结束的过渡效果

​ ease 默认，规定慢速开始，然后变快，然后慢速结束的过渡效果

​ ease-in 规定以慢速开始的过渡效果

​ ease-out 规定以慢速结束的过渡效果

​ ease-in-out 规定以慢速开始和结束的过渡效果

6、transition-delay 规定过渡效果何时开始

​ time 默认是0 指定秒或毫秒之前等待切换效果开始

2、CSS动画-Animation

1、animation-name 指定要绑定到选择器的关键帧的名称

​ 告诉系统我们需要自己创建一个名称叫做animationName的动画

​ 通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字来表示。100%表示动画的结束时间，也可以通过to关键字来表示。

​ 关键帧：

​ @keyframes animationName{

​ keyframes-selector{

​ css-style;

​ }

​ }

2、animation-duration 动画指定需要多少秒或毫秒完成

​ time 指定动画播放完成花费的时间。默认值为0，意味么有动画效果

3、animation-timing-function 设置动画将如何完成一个周期

​ linear 动画从头到尾的速度是相同的

​ ease 默认 动画以低速开始，然后加速，在结束前变慢

​ ease-in 动画以低速开始

​ ease-out 动画以低速结束

​ ease-in-out 动画以低速开始和结束

​ cubic-bezier(n,n,n,n) 在cubic-bezier 函数中自己的值。可能的值是从0到1的数值、

4、animation-delay 设置动画在启动前的延迟间隔

​ time 可选， 定义动画开始前等待的时间，以秒或者毫秒计，默认值为0.

5、animation-iteration-count 定义动画的播放次数

​ n 一个数字，定义应该播放多少次动画

​ infinite 无限次执行

6、animation-direction 指定是否应该轮流反向播放动画

​ normal 默认的取值，执行完一次之后回到起点继续执行下一次

​ alternate 往返动画，执行完一次之后往回执行下一次

​ reverse 反向执行

7、animation-fill-mode 规定动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式)

​ none 不做任何改变

​ forwards 让元素结束状态保持动画第一帧的样式

​ backwards 让元素等待状态的时候显示动画的第一帧的样式

​ both：让元素等待状态显示动画第一帧的样式，让元素结束状态保持动画最后一帧、8

8、animation-play-state 告诉系统当前动画是否需要暂停

​ running 执行动画

​ paused 暂停动画

2D转换模块

1、旋转 rotate

​ transform：rotate(45deg);

​ 其中deg是单位，代表多少度

2、平移 translate

​ transform：translate(100px,0px);

​ 第一个参数：水平方向

​ 第二个参数：垂直方向

3、缩放 scale

​ transform:scale(1.5);

​ transform: scale(0.5,0.5);

​ 第一个参数：水平方向

​ 第二个参数：垂直方向

​ 注意点：

​ 如果取值是1，代表不变

​ 如果取值大于1，代表放大

​ 如果取值小于1，代表缩小

​ 如果水平和垂直缩放都一样，那么可以简写为一个参数

4、形变中心点

​ transform-origin:

​ 第一个参数:水平方向

​ 第二个参数：垂直方向

​ 注意点：

​ 取值有三种形式：

​ 1、具体像素：20px 、10px

​ 2、百分比：50%

​ 3、特殊关键字：center、left、right

5、旋转轴向

​ 默认情况下所有元素都是围绕Z轴进行旋转的

​ 围绕Z轴旋转：transform:rotateZ(45deg)

​ 围绕X轴旋转：transform: rotateX(45deg)

​ 围绕Y轴旋转：transform:rotateY(45deg)

perspective

​ 属性定义3D元素距视图的距离。以像素计，该元素允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时。其子元素会获得透视效果，而不是元素本身

​ 1、什么是透视

​ 近大远小

​ 2、注意点：

​ 一点要是注意，透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

​

​