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

I have a link that i want to animate his border from 1px to 5px on click and in the end of the animation i want the 1px to stay, i am using animation-fill-mode with backwards but i see that the 1px border does not apply after the animation is finish.

我有一个链接,我希望动画他的边框从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>

2 个解决方案

#1

In this instance, you have to define the final state in your CSS first.

在这种情况下,您必须首先在CSS中定义最终状态。

Then define the new start point in your animation

然后在动画中定义新的起点

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>

EDIT

To solve your updated question...the default states would need to be applied to the border-g class.

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

Otherwise the answer remains as previously.

否则答案仍然如此。

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>

#2

From what I read on w3.org, in case of animation-fill-mode: backwards, the properties defined in the keyframe (from or to) will only apply to animation-delay period:

从我在w3.org上看到的,在动画填充模式的情况下:向后,关键帧中定义的属性(从或到)将仅适用于动画延迟期:

4.9. The animation-fill-mode property

4.9。动画填充模式属性

backwards

During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse).

在动画延迟定义的时间段内,动画将应用在关键帧中定义的属性值,这将启动动画的第一次迭代。这些是从关键帧的值(当动画方向是正常或交替时)或者到关键帧的值(当动画方向是反向或交替反向时)。

#1