我想同时淡入和旋转

Question

我使用ccs3在悬停时淡入图像。我希望悬停时淡入淡出的相同图像可以旋转。我好像错过了什么。

这是一把小提琴。http://jsfiddle.net/5ftZ7/

<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>
#cf {
position:relative;
margin:30px auto;
width:200px;
height:200px;
}
#cf img {
margin-top:30px;
position:absolute;
left:0;
top:0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
#cf img.top:hover {
opacity:0;
position:absolute;
left:0;
top:0;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}

Answer 1

有各种各样的问题最终导致无法按您想要的方式工作：

对过渡规则的理解

CSS属性无法累积。transition规则没有什么特别之处：

transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;

第二个声明覆盖第一个声明。这与没有什么不同

color: red;
color: blue;

蓝色。您可以使用多个逗号分隔的转换定义，或者使用特殊的all属性：

transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out

具有堆叠元件的CCD_ 3

.top位于.bottom之上，因此即使.top是透明的，.bottom也不能悬停。这将阻止应用要应用于.bottom的规则。对此，最简单的解决方案只是在#cf上检查:hover，就像在#cf:hover img.top中作为选择器一样。

.bottom中缺少transform

.bottom在悬停时也需要转换规则，以便它可以与.top同步旋转。

这里是一个仅使用-webkit并增加过渡持续时间以达到效果的工作示例。

http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/

Answer 2

我想你想要实现的是：

Fiddle：http://jsfiddle.net/marionebl/5ftZ7/2/.

仅为简洁起见，包含-webkit-。它的作用：

1. 使用以前的.bottom作为堆栈中的第一层
2. 用模仿小提琴中图像的html元素替换.bottom。也可以是具有透明度的png
3. 在#cf而不是.bottom或.top上侦听:hover状态
4. 淡入前一个.bottom，旋转前一个.top

Answer 3

不能在一个元素上使用多个转换，如果你想将转换应用于几个属性，你可以使用"所有">

transition: all 1s;

或逗号分隔的转换：

transition: opacity 1s, transform 0.8s;

Answer 4

@keyframes rotation {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(359deg);
opacity: 1;
}
}