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.

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!

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