动画
过渡和动画之间的异同
不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
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
数值越大越容易近小远大