0

I am trying to acheive a zoom-in effect on a circle on page load with CSS3.

It works, but after the animation is done, it returns to the 0% state.

<div class="circle-text large"><div>Small</div></div>

.circle-text{width:50%}
.circle text:after{content:"";display:block;width:100%;height:0;padding-bottom:100%;background:#eb1811;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}
.circle-text div{float:left;width:100%;padding-top:50%;line-height:1em;margin-top:-.5em;text-align:center;color:#000}
.circle-text.large{width:0%; animation: large 5s ease-in 1;}
@keyframes large {    0%   {width: 0%}    100% {width: 50%}}

How can I make it stop at the last frame?

Fiddle: https://jsfiddle.net/koteva/4styb93q/

web-tiki
  • 99,765
  • 32
  • 217
  • 249
tanya
  • 301
  • 2
  • 14
  • I also found this question which is a duplicate : http://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame – web-tiki Jul 02 '15 at 12:35
  • simply use forwards, example here: https://jsfiddle.net/4styb93q/3/ – GibboK Jul 02 '15 at 13:26

0 Answers0