html - 向后的 Css 动画填充模式不起作用

Question

我有一个链接，我想在点击时将他的边框从 1px 动画化到 5px，在动画结束时我希望 1px 保留，我正在使用向后的动画填充模式，但我看到 1px动画结束后边框不适用。

document.querySelector('a').onclick = function() {

  this.classList.add('border-g');
}

/* Styles go here */

body {
  margin: 100px;
}
a {
  border: 1px solid transparent;
  display: inline-block;
  padding: 20px;
}
.border-g {
  -webkit-animation: border-grow 0.5s;
  animation: border-grow 0.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
@-webkit-keyframes border-grow {
  from {
    border: 1px solid #D74C43;
  }
  to {
    border: 5px solid #D74C43;
  }
}
@keyframes border-grow {
  from {
    border: 1px solid #D74C43;
  }
  to {
    border: 5px solid #D74C43;
  }
}

<a>Hello world</a>

Answer 1

在这种情况下，您必须先在 CSS 中定义 final 状态。

然后定义动画中的新起点

body {
  margin: 100px;
}
a {
  border: 1px solid #D74C43;
  /* end like this */
  display: inline-block;
  padding: 20px;
  -webkit-animation: border-grow 0.5s;
  animation: border-grow 0.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
@-webkit-keyframes border-grow {
  from {
    border: 1px solid transparent;
    /* starts like this */
  }
  to {
    border: 5px solid #D74C43;
    /* animation ends then switches to final state */
  }
}
@keyframes border-grow {
  from {
    border: 1px solid transparent;
  }
  to {
    border: 5px solid #D74C43;
  }
}

<a>Hello world</a>

---

编辑

要解决您的更新问题...需要将默认状态应用于border-g 类。

否则答案保持不变。

document.querySelector('a').onclick = function() {

  this.classList.add('border-g');
}

body {
  margin: 100px;
}
a {
  display: inline-block;
  padding: 20px;
}
a.border-g {
  border: 1px solid #D74C43;
  -webkit-animation: border-grow 0.5s;
  animation: border-grow 0.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
@-webkit-keyframes border-grow {
  from {
    border: 1px solid transparent;
  }
  to {
    border: 5px solid #D74C43;
  }
}
@keyframes border-grow {
  from {
    border: 1px solid transparent;
  }
  to {
    border: 5px solid #D74C43;
  }
}

<a>Hello world</a>