Question

作为CSS动画的新手，我有一个我无法弄清楚背景颜色的问题。

所以我希望在动画之前有一个延迟，然后从左到右填充背景，这是可行的，但是问题是延迟的初始背景色是＃73A7CE，然后较亮的颜色有闪烁＃9BD5FF。

是否可以将＃9BD5FF作为初始颜色，而＃73A7CE仅与动画一起出现以创建加载类型效果？

html {
	box-sizing: border-box; 
	font-size: 62.5%;
	-webkit-overflow-scrolling: touch;
}
    
*, *:before, *:after { box-sizing: inherit; }

body {
	background: #282828;
  	color: #333;
  	font-family: "Open Sans", sans-serif;
  	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0;
}

.content__wrapper {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}

.promo__btn {
	align-items: center;
	animation: btn-bg-animation 5s;
	animation-delay: 4s;
	animation-timing-function: linear;
    background: linear-gradient(to right, #73A7CE 50%, #9BD5FF 50%);    
    background-size: 200%;
    display: flex;
    font-size: 2rem;
    font-weight: 600;
	height: 6rem;
	justify-content: center;
	padding-left: 1.8rem;
	padding-right: 1.8rem;
	width: 37.4rem;
}


@keyframes btn-bg-animation {
	from { 
		background-position: right; 
	}
	
	to { 
		background-position:left; 
	}
}

<section class="content__wrapper">
	<div class="promo__btn">
		<span>Button</span>
	</div><!-- /.promo__btn -->
</section><!-- /.content__wrapper -->

如果我还没有完全解释，请告诉我，我将添加更多详细信息。

Answer 1

使用2层而不是1层，并将动画应用于顶层的background-size：

body {
  background: #282828;
  color: #333;
}

.promo__btn {
  animation: btn-bg-animation 5s 4s linear forwards;
  background: 
    linear-gradient(#9BD5FF, #9BD5FF), 
    #73A7CE;
  background-size: 0 100%;
  background-repeat: no-repeat;
  
  display: flex;
  font-size: 1.5rem;
  font-weight: 600;
  height: 6rem;
  justify-content: center;
  align-items: center;
  width: 27.4rem;
  margin: 20px auto;
}

@keyframes btn-bg-animation {
  to {
    background-size: 100% 100%;
  }
}

<div class="promo__btn">
  <span>Watch Me Fade Away...</span>
</div>

CSS动画背景颜色问题

1 个答案: