CODEWITHSUNDEEP
htmlcssweb-animations
rul3z
rul3z

Reputation: 183

How to set an exact size-text after the animation text?

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

Upvotes: 1

Views: 32

Answers (1)

leightondarkins
leightondarkins

Reputation: 86

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

Upvotes: 2

Related Questions