How to make the keyframe stop at 100%/stay static after animation?

Asked

Viewed 304 times

1

I have the following keyframe:

@keyframes bolha
    0%   {width: 0px;
         height: 0px;}
    50%  {width: 600px;
         height: 600px;}
    100% {width: 400px;
         height: 400px;}
}

I call him that way:

-webkit-animation: bolha 1s;

The result: Run 1 time the animation and stop at 100% getting static.

I’m a beginner, sorry for the ignorance...

html5 css3 div

  • This repetition only occurs if you put animation: bolha 1s infinite

1 answer

0


Adds the following attribute in CSS: animation-fill-mode: forwards.

To work in all browsers:

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;

Documentation here

Browser other questions tagged html5 css3 div

You are not signed in. Login or sign up in order to post.