css after an animation

[spellchecker]

Hi there,

I am asking for help with a slightly difficult to explain issue.
So I have an **transition/animation**, and I want to animate certain properties.
**After** the duration of the animation I want to **add CSS** that contains **nonanimateable properties** such es font-weight or overflow.

How can I do that?

I played around and found that browsers are behaving diffrently with this.

Here is a [dabblet (http://dabblet.com/gist/6071346)](http://dabblet.com/gist/6071346 “dabblet “)!

In this case I want to animate the height, after that 5s I want the text to appear bold.

_Don’t get confused some browser turn the text bold midway through the animation, some browsers don’t at all._

Thanks.

[Paulie_D]

Sounds like a job for jQuery

[spellchecker]

I knew this would be an option.
But there has to be another way I believe.

[Paulie_D]

>But there has to be another way I believe.

Not with CSS I would have to say.

If something isn’t animatable/transitionable with CSS then a JS solution is required.

Equally, **adding** properties after an animation/transition is the purview of JS.

[spellchecker]

> Equally, adding properties after an animation/transition is the purview of JS.<

Maybe you could apply an animation. And a transition on top, that has a delay of the duration of the animation.
This way you could add CSS aftern an animation. Right?

> If something isn’t animatable/transitionable with CSS then a JS solution is required.

But you are right about this point.
I just wondered if there is a something that works in a quriky way.

[Paulie_D]

http://stackoverflow.com/questions/16629725/font-weight-css-transition-in-chrome

[spellchecker]

Good to know, but thats not what I wanted.
Maybe this explains the fact, that the text appeard bold midway through the animation.

I’ll guess I have to find a way around it, or use JS.
Thanks.

[Author]

Posts