css - 动画 : jelly doesn't work

Question

我尝试创建一个向左动画的按钮，然后再次向右返回到正常状态。动画不适用于此代码:

.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
 transition: background-color .3s ease-in-out; 
-webkit-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
 box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); 
 -webkit-animation: jelly 6s ease-in-out infinite; 
animation: jelly 6s ease-in-out infinite;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}

按钮的左侧应该向左扩展 20 px 然后返回，动画是无限的。按钮的 HTML:

<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free"> 
<span>Fortnite</span></button>
</div>

Answer 1

首先，您没有定义动画 jelly，它需要告诉元素哪些属性要设置动画。

其次，animation-direction: alternate 使动画在完成后自行反转。这是必要的，以防止元素跳回到开始。在此片段中，我将其放入 animation: jelly 2s ease-in-out infinite alternate;。

.fortnite-wrapper {
  position: relative;
  width: 200px;
}

.fortnite-wrapper .btn.btn-display:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2em;
  background-color: #ff0;
  -webkit-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  -webkit-box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
  -webkit-animation: jelly 2s ease-in-out infinite alternate;
  animation: jelly 2s ease-in-out infinite alternate;
  -webkit-transform-origin: 50% 50% 20px;
  -ms-transform-origin: 50% 50% 20px;
  transform-origin: 50% 50% 20px;
}

@keyframes jelly {
  0 {
    width: 100%;
  }
  100% {
    width: calc(100% - 20px);
  }
}

<div class="fortnite-wrapper">
  <button class="btn download-button btn-primary btn-display play-free"> 
<span>Fortnite</span></button>
</div>

编辑:为了让动画只影响 block 的左侧而不改变它的其余部分，我建议为属性 width 设置动画。如果将它与 position: absolute 和 right: 0 结合使用，该元素将在左侧缩小尺寸。