10-transitions和animation

CSS过渡-transitions

过渡三要素

• 必须要有属性发生变化
• 必须要告诉系统哪个属性需要执行过渡效果
• 必须告诉系统过渡效果持续时长

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

none 没有属性 不会有过渡效果

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

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

transition-duration 定义过渡效果花费的时间。默认为0。

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

transition-timing-function 规定过渡效果的时间曲线。默认是“ease”。

• ​ linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ​ ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ​ ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ​ ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ​ ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• ​ cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay 规定过渡效果何时开始 默认为0

time 指定秒或毫秒数之前要等待切换效果开始

注：

• 当多个属性需要同时执行过渡效果时用逗号隔开即可
  ​transition-property: width, background-color;
  ​transition-duration: 5s, 5s;

• transition 是 transition-property， transition-duration，transition-timing-function，

• transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

div { 
    transition: <property> <duration> <timing-function> <delay>;
}

过渡连写格式

transition: 过渡属性 过渡时长 运动速度 延迟时间;
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/
/*transition: background-color 5s linear 0s;*/
/*transition: width 5s,background-color 5s,height 5s;*/

连写注意点

• 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
• 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
• 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为 transition:all 0s;

动画-animation

过渡和动画之间的异同

不同点：

​ 过渡必须人为的触发才会执行动画
​ 动画不需要人为的触发就可以执行动画

相同点：

​ 过渡和动画都是用来给元素添加动画的
​ 过渡和动画都是系统新增的一些属性
​ 过渡和动画都需要满足三要素才会有动画效果

animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

关键帧：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}

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

animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

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

animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

• ​ linear 动画从头到尾的速度是相同的。
• ​ ease 默认。动画以低速开始，然后加快，在结束前变慢
• ​ ease-in 动画以低速开始。
• ​ ease-out 动画以低速结束。
• ​ ease-in-out 动画以低速开始和结束。
• ​ cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

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

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

animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

• n 一个数字，定义应该播放多少次动画
• infinite 无限次执行

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

• normal 默认的取值, 执行完一次之后回到起点继续执行下一次
• alternate 往返动画, 执行完一次之后往回执行下一次
• reverse 反向执行

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

• none: 不做任何改变
• forwards: 让元素结束状态保持动画最后一帧的样式
• backwards: 让元素等待状态的时候显示动画第一帧的样式
• both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

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

• running: 执行动画
• paused: 暂停动画

动画模块连写格式

​ animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

动画模块连写格式的简写

animation:动画名称 动画时长;

2D转换模块

旋转 rotate

​ transform: rotate(45deg);
​ 其中deg是单位, 代表多少度

平移 translate

​ transform: translate(100px, 0px);
​ 第一个参数:水平方向
​ 第二个参数:垂直方向

缩放 scale

​ transform: scale(1.5);
​ transform: scale(0.5, 0.5);
​ 第一个参数:水平方向
​ 第二个参数:垂直方向
​ 注意点:
​ 如果取值是1, 代表不变
​ 如果取值大于1, 代表需要放大
​ 如果取值小于1, 代表需要缩小
​ 如果水平和垂直缩放都一样, 那么可以简写为一个参数

综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/

形变中心点

transform-origin:
​ 第一个参数:水平方向
​ 第二个参数:垂直方向

​ 注意点
​ 取值有三种形式
​ 具体像素
​ /transform-origin: 200px 0px;/
​ 百分比
​ /transform-origin: 50% 50%;/
​ /transform-origin: 0% 0%;/
​ 特殊关键字
​ /transform-origin: center center;/
​ 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

旋转轴向

默认情况下所有元素都是围绕Z轴进行旋转
transform: rotateZ(45deg);
围绕z轴旋转
transform: rotateX(45deg);
围绕x轴旋转
transform: rotateY(45deg);
围绕y轴旋转
-总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

perspective

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

​ 1.什么是透视
​ 近大远小
​ 2.注意点
​ 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面