css3动画相关的属性

 

过渡（Transitions）:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

div:hover {
  background-color: blue;
}

 

 关键帧动画（Keyframes Animations）

实现更复杂的逐帧动画，通过定义关键帧来描述元素在不同时刻的样式。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

div {
  animation: slideIn 1s ease-out forwards;
}

　　

动画速度曲线函数（Timing Functions）

供transition-timing-function或animation-timing-function调用，

transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

　　

相关属性汇总表

类别	属性	作用	常用值示例
过渡（Transitions）	transition	过渡的简写形式，组合所有过渡属性	all 0.5s ease-in-out
	transition-property	规定过渡的属性，比如颜色、宽度等	all / background-color / transform
	transition-duration	动画持续时间	0.5s / 300ms
	transition-timing-function	动画速度曲线	ease / linear / ease-in / cubic-bezier(0.25, 1, 0.5, 1)
	transition-delay	动画延迟时间	0s / 0.3s
动画（Animations）	animation	动画的简写形式，组合所有动画属性	move 2s ease-in-out infinite
	animation-name	指定关键帧动画名称	slideIn / fadeIn
	animation-duration	动画持续时间	2s / 500ms
	animation-timing-function	动画速度曲线	ease / linear / ease-in / cubic-bezier()
	animation-delay	动画延迟时间	0s / 1s
	animation-iteration-count	动画播放次数	1 / infinite
	animation-direction	动画方向	normal / reverse / alternate
	animation-fill-mode	动画结束后的状态	none / forwards / backwards / both
变换（Transforms）	transform	变换，比如旋转、缩放、移动、倾斜等	rotate(45deg) / scale(1.5) / translateX(100px)
	transform-origin	设置变换的基点	center / top left / 50% 50%
滤镜（Filters）	filter	应用视觉效果，比如模糊、灰度等	blur(5px) / grayscale(100%) / brightness(150%)
不透明度（Opacity）	opacity	设置元素的透明度	0 / 0.5 / 1
性能优化	will-change	提前告诉浏览器某个属性会变化，优化性能	transform / opacity