css - CSS过渡_没有_悬停？

足够简单的问题：

当通过伪选择器（例如:hover，:active等）触发动画不适当/不可行时，是否可以利用CSS过渡？

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

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

然后使用javascript，将shown类添加到要设置动画的该元素中。

为什么不只使用jQuery或类似动画？我很高兴你问。 CSS过渡在iPhone和其他移动设备（我所针对的平台）上更加流畅。目前，我正在使用jQuery制作动画，但是它们不像它们可能的那样平滑。



编辑以澄清我对伪选择器的要求。

最佳答案

一切都会按照您的预期进行。 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;
 }

如果这不能解决您的问题，请提供其他代码示例或浏览器详细信息。祝好运！

关于css - CSS过渡_没有_悬停？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6740687/