动画.转换属性

动画

过渡和动画之间的异同
不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

animation-name

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

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

animation-timing-function

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

animation-delay

设置动画在启动前的延迟间隔

animation-iteration-count

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

animation-fil-mode

规定当动画不播放时(当动画完成时，或当动画有个延迟未开始播放时)，要应用到元素的样式。

animation-play-state

告诉系统当前动画是否需要暂停

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

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

2D转换模块

旋转 rotate

平移 translate

-缩放 scale

形变中心点transform-origin

旋转轴向
默认情况下所有元素都是围绕Z轴进行旋转transform:rotateZ(45deg)围绕z轴旋转
transform: rotateX(45deg)围绕x轴旋转
transform:rotateY(45deg)围绕v轴旋转

perspective

数值越大越容易近小远大