可以使用 CSS 的 'transition-delay' 属性或者 'animation-delay' 属性来实现动画延迟一秒启动。

'transition-delay' 属性:

/* 语法 */
transition-delay: time;

/* 示例 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
  transition-delay: 1s;
}

'animation-delay' 属性:

/* 语法 */
animation-delay: time;

/* 示例 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myanimation 1s;
  animation-delay: 1s;
}

@keyframes myanimation {
  from {transform: scale(1);}
  to {transform: scale(1.5);}
}

上述示例中,'transition-delay' 和 'animation-delay' 属性的值都为 1s,表示动画延迟 1 秒启动。需要注意的是,'transition' 和 'animation' 的 delay 属性的值必须和其对应的动画时长相等。

CSS 动画延迟启动:transition-delay 和 animation-delay 属性

原文地址: https://www.cveoy.top/t/topic/nAeq 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录