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
posted @ 2025-02-17 16:38  我是格鲁特  阅读(19)  评论(0)    收藏  举报