CODEWITHSUNDEEP
javascriptcssanimation
user687554
user687554

Reputation: 11151

CSS Animation Is Not Staying

I have a page that has an input field and a "next" button. When the user clicks next, I want to shrink the input field and remove the "next" button. I have it mostly working as seen in this Bootply. My CSS animations look like this:

    .default {
        transition: all 1.0s ease;
    }

    .exit {
        padding-left:5rem;
        padding-right:5rem;
    }

    .remove-button {
        animation: animate-remove-button 1.0s;
    }

    @keyframes animate-remove-button {
        from {
            transform:scaleX(1.0);
            opacity: 1.0;
        }

        to {
            transform:scaleX(0);
            opacity: 0;
        }
    }

The animation runs. However, after the animation has completed, the button reappears. In addition, I basically want the width of the button to shrink all the way to 0 so that the text field grows. But, as you can see in the Bootply, that's not really happening, even though it kind of looks like it is.

What am I missing?

Upvotes: 0

Views: 212

Answers (1)

ashish singh
ashish singh

Reputation: 6904

.remove-button {
  animation: animate-remove-button 1.0s;
  animation-fill-mode: forwards;
}

animation fill mode: forwards tell to keep the last state of animation.

Documentation: https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode

Upvotes: 2

Related Questions