我想在同一时间淡入和旋转

Question

我正在使用ccs3在悬停时淡入图片。我喜欢在悬停旋转时淡入的相同图像。我似乎错过了什么。

这是一个jsfiddle。 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

带有堆叠元素的

:hover。

.top位于.bottom之上，因此即使.bottom透明，.top也无法悬停。.bottom这可以防止您应用于:hover的规则被应用。最简单的解决方案就是检查#cf上的#cf:hover img.top，而不是transform作为选择器。

来自.bottom 的

.bottom

.top在悬停时也需要转换规则，因此它可以与-webkit同步旋转。

以下是仅使用{{1}}并增加效果的转换持续时间的工作示例。

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

Answer 2

我想你想要实现的是：

小提琴：http://jsfiddle.net/marionebl/5ftZ7/2/。

仅为了简洁而包含-webkit-。这是做什么的：

1. 使用前.bottom作为堆栈中的第一层
2. 用模仿小提琴中图像的html元素替换.bottom。也可以是透明度的png。
3. 在:hover而不是#cf或.bottom
上收听.top州
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;
    }
}