CSS-动画

CSS-动画

• 过渡（transition）
  发生某个行为时某属性值发生变化

  • transition-property:执行过渡的属性，例height\ weight \all

  • transition-duration:过渡的持续时间，s或ms

  • transition-timing-function:过渡的时序函数

    • 可选值：
    • ease 默认值 先加速，后减速
    • linear 匀速运动
    • ease-in 加速运动
    • ease-out 减速运动
    • ease-in-out 先加速后减速
    • cubic-bezier() 时序函数 使用时参考https://cubic-bezier.com
    • steps(步数，什么时候执行)
      - 步数：数字
      - 什么时候执行：end时间结束时执行，start时间开始时执行

  • transition-delay:过渡效果的延迟时间

  • 可简化书写，例如 transition:margin-left 2s 1s cubic-bezier(.24,.95,.82,-0.88);

  • 注意：所有属性同时在transition中书写时，持续时间应放在延迟时间之前

• 动画

  • 自动触发动态效果
  • 设置动画的步骤，设置关键帧——设置动画的相关属性
  • 关键帧

@keyframes 关键帧的名字{
	/*起始帧的样式*/
	from{
		....
	}
	百分比{
		...
	}
	/*结束帧的样式*/
	end{
		...
	}
}

	- 动画的相关属性
		- animation-name  对当前元素生效的关键帧的名字
		- animation-time  动画的执行时间
		- animation-delay  动画的延迟时间
		- animation-iteration-count  动画执行的次数
			- 可选值，次数  和  infinite 无限
		- animation-direction  动画运行的方向
			- 可选值：
			- normal  默认值，从from向to运动
			- reverse  从to向from运动
			- alternate  从from向to运动 ，重复执行时反向执行
			- alternate-reverse   从to向from运动，重复执行时反向执行
		- animation-play-state  动画的执行状态
			- 可选值：
			- runnning 默认  执行
			- paused  暂停
		- animation-fill-mode  动画的填充模式
			- 可选值
			- none 默认  执行完毕回到原来的位置
			- forwards  执行完毕停在动画结束的位置
			- backwards  延时等待时处于动画开始的位置
			- both  结合forwards和backwards
		- 所有的动画设置都可简化到animation中
		- 例如：animation:test 2s  2  1s  alternate;	

• 变形(transform)

  • 在不影响布局的情况下，改变元素的形状和位置

  • 平移：

    • X、Y轴平移 ：transformX() 、transformY()
    • Z轴平移： transformZ()
    • 括号内可选值：像素值 或 百分比（相对于自身）
    • 注意:margin:auto设居中的前提是已知元素大小，当元素大小未知时可用平移X/Y来设置居中
    • Z轴平移设置的是元素与人眼间的距离，若想设置立体效果，则需设置网页的视距
    • 视距设置：例子 perspective:800px
    • transform: translateX(-50%) translateY(-50%);

  • 旋转：

    • rotateX() rotateY() rotateZ()
    • 括号内的可选值：角度deg 多少转 turn
    • 旋转时元素背面是否可见：backface-visibility:hidden
    • transform: rotateY(180deg);

  • 缩放(scale)

    • scaleX()水平方向缩放 scaleY() 竖直方向缩放 scale()双方向缩放
    • 可选值：缩放的倍数
    • transform-origin： 缩放的原点，以像素点表示