CODEWITHSUNDEEP
csscss-animations
steve
steve

Reputation: 3356

css transitions _without_ hover?

Simple enough question:

Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?

My use case is I want something to animate after form submission. I was thinking I would be able to do something like:

.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }

Then using javascript, I would add the shown class to this element I want to animate.

Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.

Edited to clarify what I was asking about pseudo-selectors.

Upvotes: 2

Views: 1730

Answers (2)

hayesgm
hayesgm

Reputation: 9096

Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/

 .success_message {
   opacity: 0.0;
   transition: opacity 0.3s linear;
   -webkit-transition: opacity 0.3s linear;
   -moz-transition: opacity 0.3s linear;  
   -o-transition: opacity 0.3s linear;
 }

 .success_message.shown {
   opacity: 1.0;
 }

If this does not solve your issue, please include further code samples or browser specifics. Good luck!

Upvotes: 3

John Stimac
John Stimac

Reputation: 5493

Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.

Upvotes: 1

Related Questions