温馨提示×

CSS动画效果如何控制时间

css
小樊
123
2024-10-25 04:00:52
栏目: 编程语言
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

CSS 动画的时间控制主要通过 animation-duration 属性来实现,该属性用于指定动画完成所需的时间,其值通常以秒(s)或毫秒(ms)为单位。例如,以下代码将使元素在 2 秒内完成动画:

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

除了 animation-duration,还可以使用 animation-delay 属性来控制动画开始之前的时间间隔,使用 animation-iteration-count 属性来控制动画的播放次数,使用 animation-timing-function 属性来控制动画时间变化的加速度曲线。

例如,以下代码将使元素在等待 1 秒后开始动画,并且无限次循环播放:

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:CSS动画效果如何优化性能

0