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

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 it this way:

-webkit-animation: bolha 1s; 

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

I'm a beginner, sorry for ignorance ...

    
asked by anonymous 04.02.2015 / 19:43

1 answer

0

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

To work across all browsers:

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

Documentation here

    
04.02.2015 / 20:09