Question

我使用 box-shadow 尝试过动画。如果你注意到红色盒子阴影来回重复两次。我怀疑它是否由于 animation-direction：alternate 属性或由于错误的box-shadow属性而发生。你能纠正我的错误吗？希望您理解我的疑问。

＆＃13;

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite alternate;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
    box-shadow:0 0 3px #0388db;
  }
}

＆＃13;

<div class="loader">

</div>

＆＃13;

请参阅工作小提琴 HERE

Answer 1

＆＃13;

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite forwards;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
  box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
  box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red, 24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
      box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
}

＆＃13;

<div class="loader">

</div>

＆＃13;

将animation-timing-function用作forwards，

希望这会有所帮助..

Answer 2

您应该更改0％和25％的代码行

0％的红色循环应为-48和48 px，25％应为-24和24 px

＆＃13;

.loader{
	height:20px;
	width:20px;
	background:#0388db;
	border-radius:50%;
	margin:50px;
	box-sizing:border-box;
	animation:boxShadow 2s linear infinite alternate;
	box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
	0%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
	}
	25%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
	}
	50%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
	}
	75%{
		box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
	}
	100%{
		box-shadow:0 0 3px #0388db;
	}
}

＆＃13;

		<div class="loader">
		</div>

＆＃13;

Answer 3

动画方向：替代属性不适合此示例。删除它。

＆＃13;

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
    box-shadow:0 0 3px #0388db;
  }
}

＆＃13;

<div class="loader">

</div>

＆＃13;

CSS仅加载动画不按预期工作

3 个答案: