css 过渡_没有_悬停？

Question

足够简单的问题：

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

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

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

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

为什么不直接使用 jQuery 或类似的 animate？我很高兴你问了。 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 转换都会起作用，即使是因为类发生了变化。