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中定义最终状态。

然后在动画中定义新起点

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>

Answer 2

根据我在w3.org上的内容，animation-fill-mode: backwards的情况下，关键帧（from或to）中定义的属性仅适用于animation-delay期间：

4.9。动画填充模式属性

向后

在动画延迟定义的期间，动画   将应用将启动的关键帧中定义的属性值   动画的第一次迭代。这些都是值   来自关键帧（当动画方向正常或交替时）或   关键帧的那些（当动画方向是反向或   交替反转）。

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

2 个答案: