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 |