[分享]css动画所用时间属性

CSS动画是我们网页中经常使用的元素之一，它为网页增添了生动性和多样性。在CSS动画中，时间是一个非常重要的因素，可以通过时间相关的属性来控制动画的表现形式和持续时长。/ 以下为常见的几个时间属性 /...

CSS动画是我们网页中经常使用的元素之一，它为网页增添了生动性和多样性。在CSS动画中，时间是一个非常重要的因素，可以通过时间相关的属性来控制动画的表现形式和持续时长。

/* 以下为常见的几个时间属性 */

animation-duration: 2s;  /* 动画持续时间，2秒 */
animation-delay: 1s;     /* 动画延迟时间，1秒后开始 */
animation-timing-function: ease;  /* 动画速度曲线，缓慢-in-快出 */
animation-iteration-count: infinite;  /* 动画重复次数，无限次 */
animation-direction: alternate;  /* 动画方向，正常-forward-反向-backward轮流运动-alternate */
animation-play-state: running;    /* 动画状态，运行中-running-暂停-paused */ 

以上这些属性可以直接在animation样式中使用，例如：

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
} 

在上面的代码中，我们定义了一个名为move的动画，在.box元素中应用了它。此动画将持续2秒，使用缓慢进入、缓慢退出的速度曲线，设置为无限重复。如果我们想让这个动画在1秒后开始播放，可以在animation样式中添加一条animation-delay属性，例如：

.box {
  animation: move 2s ease-in-out infinite;
  animation-delay: 1s;
} 

以上就是CSS动画所用时间属性的一些介绍和示例，希望能对您有所帮助。