css中的过渡，动画，变形

过渡transition

三要素：

1.必须要有属性发生变化

2.必须告诉系统那个属性需要执行过渡效果

3.必须告诉系统过渡效果持续时间

属性：

transition-property 过渡属性名称

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

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

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

transition-duration 过渡持续时长

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

transition-timing-function 过渡曲线速率

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

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

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

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

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

transition-delay 过渡等待时长

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

过渡连写格式

transition: 过渡属性 过渡时长 运动速度 延迟时间;

transition:property duration timing-function delay;

动画animation

三要素：

1.告诉系统执行哪一个动画

2.告诉系统执行速度

3.动画持续时间

触发条件：不需要认为触发

属性：

animation-name动画名称

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

@keyframes name

animation-duration 动画持续时长

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

animation-timing-function 动画执行速度

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

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

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

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

animation-delay 动画等待时长

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

animation-iteration-count 动画迭代次数

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

infinite 无限次执行

animation-direction 动画是否反向执行

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

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

reverse 反向执行

animation-fill-mode 动画结束停留在第几帧

none: 不做任何改变 ​

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

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

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

animation-play-state 动画暂停

running: 执行动画 ​

paused: 暂停动画

动画模块连写格式

animation:name duration timing-function delay iteration-count direction fill-mode

***过渡和动画之间的异同

不同点：

过渡必须人为触发才会执行

动画不需要人为触发就可以执行动画

相同点：

过渡和动画都是给元素添加动画的

过渡和动画都是系统新增的一些属性

过渡和动画都需要满足三要素才会有动画效果

变形transform

属性：

旋转 rotate

transform: rotate(45deg); ​

其中deg是单位, 代表多少度

平移 translate

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

第一个参数:水平方向 ​

第二个参数:垂直方向

缩放 scale

transform: scale(1.5);

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

如果取值大于1, 代表需要放大 ​

如果取值小于1, 代表需要缩小

transform: scale(0.5, 0.5);

第一个参数:水平方向 ​

第二个参数:垂直方向

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