使用animation-delay保留动画起始帧

2019-09-05110次阅读css3

CSS3 Animation中的animation-delay属性定义动画什么时候开始。值单位可以是秒(s)或毫秒(ms)。 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

我们看下面这个例子:

.cube {
  margin-bottom: 10px;
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 10s linear;
}

.has-delay {
  animation-delay: 2s;
}

.has-ng-delay {
  animation-delay: -2s;
}

@keyframes colorChange {
  20% {
    background-color: #f8e81c;
  }

  40% {
    background-color: #d0011b;
  }

  60% {
    background-color: #7ed321;
  }

  80% {
    background-color: #509ce3;
  }

  100% {
    background-color: #ccc;
  }
}

html 结构如下:

<div class="cube"></div>
<div class="cube has-ng-delay"></div>
<div class="cube has-delay"></div>

这个例子中,我们将cube的动画总时长设为10s,且初始颜色都是灰色。不同的是,第一个cube正常执行,第二个cube"延迟"-2s执行,第三个cube延迟2s执行。


根据下面这张图可以看出,第二个cube虽然是负数,但从动画一开始就会执行,只不过它是从第二帧开始的。


这是因为定义在@keyframes中的动画需要执行animation-time时间长度。animation-delay为正数的时候,动画就要要延迟开始,animation-time都还没有开始计算,正数的delay不会被计算到animation-time中,因此我们看到的动画就是从第一帧开始的;animation-delay为负数的时候,意味着动画是提前开始的,animation-time已经开始计算了,负数的delay是被算入 animation-time中的,所以我们看到的动画是从某一帧开始的。

下面是一个loading源码例子:

<div class="bruce flex-ct-x">
	<ul class="initial-keyframe">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

css代码:

.initial-keyframe {
	position: relative;
	width: 100px;
	height: 100px;
	li {
		position: absolute;
		border-radius: 100%;
		width: 100%;
		height: 100%;
		background-color: $green;
		transform: rotate(0) translate(-80px, 0);
		animation: rotate 3s linear infinite;
		&:nth-child(2) {
			animation-delay: -1s;
		}
		&:nth-child(3) {
			animation-delay: -2s;
		}
	}
}
@keyframes rotate {
	to {
		transform: rotate(1turn) translate(-80px, 0);
	}
}

 

上一篇: CSS3 Animation属性大全  下一篇: 提示滚动进度的指示器例如阅读进度  

使用animation-delay保留动画起始帧相关文章