前端学习日记11

css3的过渡和动画

过渡属性

transition：transition-propertype transition-duration transiton-timing-function transition-delay
过渡的复合属性
其中，过渡的持续时间不可以省略
参与过渡的属性省略：默认是all
过渡的速度变换曲线省略：默认是ease
过渡的延时时间省略：默认是0
可单独设置:

（1）transition-propertype: 需过渡的属性名
单独设置时可以写多个属性名，中间用逗号隔开
可选值：
①属性名（width，height…）
②all :选中所有需变化的属性名
③none:没有属性需要过渡

（2）transition-duration: 过渡所持续的时间
多个属性值之间，用逗号隔开，是和参与过渡的属性一一对应的关系
单位：s ms
500ms = 0.5s = .5s
​（3）transiton-timing-function: 速度曲线

可选值：
① ease :默认值 慢速开始，之后变快，最后以慢速结束
② ease-in :慢速开始，快速结束
③ ease-out :快速开始，慢速结束
④ease-in-out :慢速开始，之后变快，最后以慢速结束
⑤linear :匀速
⑥贝塞尔曲线：cubic-bezier(.01,1.05,.95,.29)
（贝塞尔曲线官网：https://cubic-bezier.com）

（4） transition-delay: 过渡延迟执行的时间

动画

transform:变形函数

1、2D变形函数：
（1） translate(X,Y)：位移
translate(num):
一个值元素在水平移动num的距离
如果是两个值，第一个值代表在水平方向上的位移，第二个值代表垂直方向上的位移
translateX(num)：元素在水平方向移动num的距离
translateY(num)：元素在垂直方向移动num的距离
​
num如果为正值，代表水平右移动，垂直向下移动
num如果为负值，代表水平左移动，垂直向上移动
​
（2） rotate(deg)：旋转
deg为正值：元素顺时针旋转
deg为负值：元素逆时针旋转
​
（3）scale():缩放
scale(x,y):两个值的时候：第一个值表示x轴缩放的倍数，第二个值表示y轴缩放的倍数
一个值的时候：表示x轴和y轴同时缩放的倍数

0~1，缩小
大于1,放大
负数：将元素翻转之后再进行缩放
scaleX(num):表示元素水平方向进行缩放
scaleY(num):表示元素垂直方向进行缩放
​
（4） skew:倾斜
skew(deg)：两个值时，第一个值表示x轴的倾斜角度，第二个值表示y轴的倾斜角度
一个值的时候：表示的是x轴倾斜的角度
skewX()x轴倾斜的角度
skewY()Y轴倾斜的角度
在x轴倾斜的时候，以左下角为准，正值向右倾斜，负值向左倾斜
在y轴倾斜的时候，以左上角为准，正值向上倾斜，负值向下倾斜
​
transition-origin:变形原点，以某一点进行变换
两个值：第一个值x轴的位置 第二个值y轴的位置
一个值：这个值表示x轴的位置 y轴默认是center

值：px 百分比 关键字（left，top， bottom，right，center）
​
一个动画可以有多个变形函数,复合写法 中间用空格隔开
transform:rotate(50deg) scale(1.5) translate(100px,200px) skew(30deg);

2、3D变形函数
（1）translateZ(): 沿Z轴进行移动，正值时沿z轴正向移动，负值时沿z轴负向移动
效果类似于2d中的缩放
ranslate3d（x,y,z）
​
（2）rotate:旋转
①rotateX(deg) :沿x轴进行旋转，以元素上边框为准，正值时，往后面翻转；负值时，往前面翻转
②rotateY(deg) ：沿y轴进行旋转，以元素左边框为准，正值时，往右边翻转，负值时，往左边翻转
③rotateZ(deg)：沿z轴进行旋转，和2d中的rotate()效果一样，正值时，顺时针旋转，负值时，逆时针旋转
④rotate3d(x,y,z,deg)
x,y,z的取值为（1，0，-1）

​（3）scaleZ(num) z轴方向上的缩放
scale(x,y,z)
​
（4） perspective：number | none
景深，定义3D元素距视图的距离，以像素计算（眼睛到屏幕的距离，远小近大600-2000）。
当元素定义了perspective属性后，其子元素获得透视效果，而不是元素本身没。
​
（5）transform-style:preserve-3d; 使其子元素继承3d空间
创建3D空间呈现被嵌套的元素，该属性必须和transform一起使用
flat：子元素将不保留其3D位置
preserver-3d：子元素保留其3D位置

帧动画补充

帧动画- 自定义动画

可以定义多个状态的变化

1, 定义动画(定义状态的变化过程)
@keyframes 动画名字{
0%{ yellow }
25%{ red }
50%{ blue }
75%{ green }
100%{ pink }
}
定义动画不同的阶段 % | from(0%) to(100%)

2, 帧动画使用
复合写法：
animation:name duration timing-function delay iteration-count direction;
动画
（1）animation-name：帧动画的名字
（2）animation-duration:动画所花费的时间 s | ms
（3）animation-timing-funtion:速度曲线
（4）animation-delay:动画延迟执行的时间 s | ms
（5）animation-iteration-count:动画执行的次数 num | infinite
（6）animation-direction:是否反向轮流播放 normal | alternate
animation-play-state: paused; 动画暂停
animation-play-state: running; 动画播放

动画库：
https://daneden.github.io/animate.css/