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 |

浙公网安备 33010602011771号