CODEWITHSUNDEEP
htmlcss
user4207046
user4207046

Reputation:

Css animation-fill-mode backwards does not work

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.

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>

Upvotes: 0

Views: 686

Answers (2)

Paulie_D
Paulie_D

Reputation: 115293

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

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.

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>

Upvotes: 1

baf
baf

Reputation: 4681

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:

4.9. The animation-fill-mode property

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).

Upvotes: 0

Related Questions