css transitions _without_ hover?

Question

很简单的问题:

是否有可能利用css过渡时，它将是不合适的/可行的触发动画通过伪选择器(即:hover, :active，等)?

我的用例是我想在表单提交后动画的东西。我想我可以这样做:

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

然后使用javascript，我将shown类添加到我想要动画的元素。

为什么不使用jQuery或类似的动画?我很高兴你这么问。CSS过渡在iPhone和其他移动设备上更加流畅，这是我的目标平台。目前我正在用jQuery做动画，但它们并不是那么流畅。

---

Answer 1

一切都应该如你所愿。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;
 }

如果这不能解决您的问题，请包含进一步的代码示例或浏览器细节。好运！

Answer 2

可以。当Css属性发生变化时，Css转换就会起作用，即使是因为类发生了变化。