1

This is my first approach to html5/css3 animations.

I have a fadeIn and scale effect on text.

When animation is finished, I have a problem. The text is resized. I dont want this.

I wish that the text remains the same size at the end of the animation (30px).

sample

Andre
  • 26,751
  • 7
  • 36
  • 80
rul3z
  • 173
  • 1
  • 16

1 Answers1

2

Just add your maximum font size to the .textEffect class

.textEffect
    {
        -webkit-animation-name:fadin;
        -webkit-animation-duration:2s;
        -webkit-animation-timing-function:cubic-bezier( .83,.27,.55,1);
        -webkit-animation-iteration-count: 1;
        font-size:30px;
    }

Example Here

leightondarkins
  • 86
  • 4
  • Thanks a lot! But at what value " returned " to the end of the animation ? and why? – rul3z Nov 18 '15 at 16:07
  • The text was returning to the default font-size set by the browser (16px). This is because you hadn't overridden the font-size on the text you were animating. – leightondarkins Nov 18 '15 at 16:14