css - CSS过渡_without_悬停？

Question

很简单的问题：

:hover当通过伪选择器（即，:active等）触发动画不合适/不可行时，是否可以利用 css 转换？

我的用例是我想要在表单提交后制作动画。我在想我可以做类似的事情：

.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 转换都会起作用，即使是因为类发生了变化。