How to Animate Element Again, After Animation-Fill-Mode: Forward

How to animate element again, after animation-fill-mode: forward?

Use two animations like below:

.main-image {
  transition: transform .5s ease-in-out;
  height: 50px;
  margin: 10px;
  background: red;
}

#portfolio:hover #portfolio-image {
  transform: scale(1.1);
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}
@keyframes move {
  0% {
    transform: translateY(-30%);
  }
}

#portfolio .main-image {
  opacity: 0;
  animation: 
    0.5s ease-out 0.2s fade forwards, /* forwards only for opacity */
    0.5s ease-out 0.2s move;
}

<div id='portfolio' class='main-block'>
  <div id='portfolio-image' class='main-image'></div>
</div>

Transition doesn't work after animation forwards

Still don't know what's wrong with keyframes in chrome/safari, but have found simple workaround.

Now first 'before'-element is on right with no width right: 0; width: 0;.
On hover it moves to left with 100% width, that begins to transitionally grow: left: 0; right: auto; width: 100%;.

Finally, when hover was lost, 'before' starts to decreasing, resting on the right end again.

New code:

button {
  padding: 5px 0;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: blue;
    transition: all .25s;
  }

  &:hover {

    &:before {
      left: 0;
      right: auto;
      width: 100%;
    }
  }
}

Codepen

CSS transform and transition on hover do not work after animation-fill-mode: forwards

Why does transform not work when animation fill mode is forwards?

As per W3C pec: (emphasis is mine)

By default, an animation will not affect property values between the time it is applied (the ‘animation-name’ property is set on an element) and the time it begins execution (which is determined by the ‘animation-delay’ property). Also, by default an animation does not affect property values after the animation ends (determined by the ‘animation-duration’ property). The ‘animation-fill-mode’ property can override this behavior.
If the value for ‘animation-fill-mode’ is ‘forwards’, then after the animation ends (as determined by its ‘animation-iteration-count’), the animation will apply the property values for the time the animation ended.

The above means that the UA has to apply and maintain the transform on the element even after the animation has ended. This would sort of imply that the transform mentioned within the animation gets precedence and hence the transform that is mentioned within the :hover state has no effect.

When animation-fill-mode: none or animation-fill-mode: backwards is applied then the UA does not have to maintain the transformed state after the animation has ended (meaning it kind of becomes like transform: none) and so the transform within the :hover selector works.

This behavior is consistent in latest versions of Chrome and Firefox. In IE11 and Edge the transform that is specified within the :hover selector has no effect irrespective of what value is provided for the animation-fill-mode property.

Why does transition not work when even when fill mode is changed to none?

I am not sure if the code in CodePen is the original one or if you made any changes for testing but the transition property is wrongly specified in that demo and that is the reason why transition does not happen.

The code that is present is:

transition: scale 1s ease;

but scale is not the property that needs to be transitioned. It is only the type of transform that needs to be done. The property is transform and hence the code should be as below:

transition: transform 1s ease;

If you do this change then the transition will work if the animation-fill-mode is changed.

Animation fill mode and opacity are not keeping the last style after animation ends

Your last keyframe is 100% {opacity: 1;} so this is the style that is retained... however this isn't the style that is making the text visible!

The text has color:transparent so opacity is not having any effect. The style that is actually making the text visible is text-shadow: 0 0 0px #111;, so you need to include this in your last keyframe:

100%   {opacity: 1; text-shadow:  0 0 0px #111; }

Note: I've kept opacity in case you have other elements not included here, but for the code you have here it is not actually doing anything :)

Working Example:

You can see this working below, FYI I've made run for 2s so it's quicker to see it works :)

span {
    color: transparent;
    animation: blur 2s ease-out;
    -webkit-animation: blur 2s ease-out;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

span:nth-child(1) {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}
span:nth-child(8) {
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
span:nth-child(9) {
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}
span:nth-child(10) {
    animation-delay: 1.0s;
    -webkit-animation-delay: 1.0s;
}
span:nth-child(11) {
    animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
}
span:nth-child(12) {
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
}
span:nth-child(13) {
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
}
span:nth-child(14) {
    animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
}

@keyframes blur {
    0%      {text-shadow:  0 0 100px #111; opacity:0;}
    5%      {text-shadow:  0 0 90px #111;}
    15%     {opacity: 1;}
    20%     {text-shadow:  0 0 0px #111;}
    80%     {text-shadow:  0 0 0px #111;}
    100%   {opacity: 1; text-shadow:  0 0 0px #111; }
}

@-webkit-keyframes blur {
    0%      {text-shadow:  0 0 100px #111; opacity:0;}
    5%      {text-shadow:  0 0 90px #111;}
    15%     {opacity: 1;}
    20%     {text-shadow:  0 0 0px #111;}
    80%     {text-shadow:  0 0 0px #111;}
    100%   {opacity: 1; text-shadow:  0 0 0px #111; }
}

<div class="section active">
   <span>Il</span>
   <span>massaggio</span>
   <span>è</span>
   <span>l'unica</span>
   <span>forma</span>
   <span>di</span>
   <span>piacere</span>
   <span>fisico</span>
   <span>a</span>
   <span>cui</span>
   <span>la</span>
   <span>natura</span>
   <span>ha</span>
   <span>dimenticato</span>
   <div id="arrow-container">
     <img src="images/social-35-white.svg" id="arrow-down" alt="Sample Image" class="image-2">
   </div>
 </div>

CSS Animation Fill Mode - What have I done wrong?

So the root issue was the class with the animation was being removed.

I couldn't get it to work using the same keyframes, but what i did was create a new keyframes for counter clockwise, and then removed the opposite class when the buttons were clicked

Changes:

css

.spin-clockwise {

-moz-animation: spin 2s;
  -webkit-animation: spin 2s;

}

.spin-fill-mode {
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.spin-counter-clockwise {
  -moz-animation: spin-counter 2s; 
  -webkit-animation: spin-counter 2s; 

}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes spin-counter {
  from {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

js:

$('#btnb').on('click', (e)->

$('.box')
    .addClass('spin-counter-clockwise')
    .removeClass('spin-clockwise')
)

$('#btnf').on('click', (e) ->
  $('.box')
    .addClass('spin-clockwise')
    .removeClass('spin-counter-clockwise')
)

And add the class spin-fill-mode to box. Though you could probably just leave the fill-mode in the animation classes...
updated codepen:

http://codepen.io/anon/pen/QypvOr

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

CSS element reappears unexpectedly after CSS animation

add animation-fill-mode: forwards to

Let the element retain the style values from the last keyframe when the animation ends.

source

$(document).scroll(function() {  if ($(document).scrollTop() > 20) {

    $("#photo-container h1").removeClass("animate");    setTimeout(function() {      $("#photo-container h1").addClass("animate-out")    }, 1);
    $("#menu ul").removeClass("animate2");    setTimeout(function() {      $("#menu ul").addClass("animate-out2");    }, 1);
    //$("#menu li").hide();
  } else if ($(document).scrollTop() < 20) {    $("#photo-container h1").removeClass("animate-out");    setTimeout(function() {      $("#photo-container h1").addClass("animate");    }, 1);
    $("#menu ul").removeClass("animate-out2")    setTimeout(function() {      $("#menu ul").addClass("animate2");    }, 1);  }})

body {  height: 1000px;}#photo-container h1 {  color: orange;  letter-spacing: 2.5px;  font-size: 40;  text-align: center;  padding-top: 50px;  font-family: Arial, Helvetica, sans-serif;  font-weight: 100;  transition: all 2s;}
@keyframes example {  0% {    opacity: 0;    transform: translateY(-100px);  }  100% {    opacity: 1;    transform: translateY(0px);  }}
#menu li {  display: inline;  margin-left: 2%;  margin-right: 2%;  font-size: 25;  animation-name: example2;  animation-duration: 2s;  animation-fill-mode: forwards;}
@keyframes example2 {  0% {    opacity: 0;    transform: translateY(200px);  }  100% {    opacity: 1;    transform: translateY(0px);  }}
.animate {  animation-name: example;  animation-duration: 2s;  animation-fill-mode: forwards;}
.animate2 {  animation-name: example2;  animation-duration: 3s;  animation-fill-mode: forwards;}
.animate-out2 {  animation-name: example2;  animation-direction: reverse;  animation-duration: 3s;  animation-fill-mode: forwards;}
.animate-out {  animation-name: example;  animation-direction: reverse;  animation-duration: 3s;  animation-fill-mode: forwards;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="photo-container">  <h1 class="animate">Matt Haywood</h1>  <div id="menu">    <ul class="animate2">      <li><a class="link" id="blog_button" href="#blog">About</a></li>      <li><a class="link" id="projects_button" href="#projects">Projects</a></li>      <li><a class="link" id="photography_button" href="#photography">Photography</a></li>      <li><a class="link" id="sites_button" href="#sites">Sites</a></li>      <li><a class="link" id="uni_button" href="#uni">Uni Work</a></li>      <li><a class="link" id="contact_button" href="#contact">Contact</a></li>    </ul>  </div></div>

How to Animate Element Again, After Animation-Fill-Mode: Forward