如何使盒影动画弹出侧面？我错在哪？

Question

我有一个分区(.animate)，它的box-shadow属性正在被动画化。我希望它从右侧弹出，就像我应用于第二除法的那个(.animate2)。请运行代码段查看动画。所需的动画由第二部门展示。

对于第二部分，我已经用:before元素制作了所需的动画，方法是动画它的宽度和左边距。但我想要一种消除psuedo元素的方法。我有这样的代码，我试图将Widthani的动画关键帧复制到BoxShadowani的关键帧中，但是这两个部门的动画并不相同。我错过了什么？我的逻辑在哪里使我不及格？（关键帧后的评论解释了我的逻辑。）

这是我的代码：

null

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Animate {
  box-shadow: 600px 0px #ddd inset;
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}

.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}

.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}

@-webkit-keyframes BoxShadowAni {
  0% {box-shadow: 0px 0px #ddd inset;}/*Starts from left edge*/
  10% {box-shadow: 600px 0px #ddd inset;}/*To grow upto the left edge*/
  20% {box-shadow: -5px 0px #ddd inset;}/*To reduce in length upto the right edge*/
  25% {box-shadow: -5px 0px #ddd inset;}/*To stay for a while and then bounce back*/
  35% {box-shadow: -600px 0px #ddd inset;}/*Grow upto the right edge*/
  45% {box-shadow: 0px 0px #ddd inset;}/*To reduce in length upto the left edge*/
  100% {box-shadow: 0px 0px #ddd inset;}/*To insert a pause b4 animation loops back*/
}

@-webkit-keyframes WidthAni {
  0% {width: 0px}
  10% {width: 100%;left: 0;right: 0}
  20% {width: 5%;left: 95%;}
  25% {width: 5%;left: 95%;}
  35% {width: 100%;left: 0%;}
  45% {width: 0%;}
  100% {width: 0%;}
}

<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>

null

Answer 1

我想问题是当你把影子换成另一个的时候。我建议你依靠多个方框阴影来实现这一点，你会有一个更好的渲染。诀窍是要确保你总是覆盖整个区域时，改变阴影。

因此，不需要从300px0px#DDD Inset切换到-300px0px#DDD Inset，在这里您可以执行以下操作：

300px0px#DDD插入，0px0px#DDD插入到300px0px#DDD插入，-300px0px#DDD插入再到0px0px#DDD插入，-300px0px#DDD插入

null

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Animate {
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}

.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}

.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}

@-webkit-keyframes BoxShadowAni {
  0% {
    box-shadow: 0px 0px #ddd inset, 0px 0px #ddd inset;
  }
  10% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  10.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  10.2% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  20% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  25% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  35% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.2% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  45%,100% {
    box-shadow: 0px 0px #ddd inset,0px 0px #ddd inset;
  }
}

@-webkit-keyframes WidthAni {
  0% {
    width: 0px
  }
  10% {
    width: 100%;
    left: 0;
    right: 0
  }
  20% {
    width: 5%;
    left: 95%;
  }
  25% {
    width: 5%;
    left: 95%;
  }
  35% {
    width: 100%;
    left: 0%;
  }
  45% {
    width: 0%;
  }
  100% {
    width: 0%;
  }
}

<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>