I Want to Fade in and Rotate at the Same Time - css

Question

I'm using ccs3 to fade in an image on hover. I'd like that same image that fades in on hover to rotate. I seem to be missing something.
Here is a 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

There are a variety of issues that culminate in this not working the way you want:
Understanding of transition rules
CSS properties cannot accumulate. There is nothing special about the transition rule:
transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;
The second declaration overrides the first. This would be no different than:
color: red;
color: blue;
being blue. You can use multiple comma-separated transition definitions, or use the special all property:
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 with stacked elements.
.top is on top of .bottom, so .bottom cannot be hovered even when .top is transparent. This prevents rules that you would want to apply to .bottom from being applied. The simplest solution to this is just to check for :hover on #cf instead, as in #cf:hover img.top as the selector.
transform missing from .bottom
.bottom also needs the transform rules when it is hovered so it can rotate in sync with .top.
Here is a working example using only -webkit and increasing the transition durations for effect.
http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/

Answer 2

I guess what you are trying to achieve is this:
Fiddle: http://jsfiddle.net/marionebl/5ftZ7/2/.
Includes -webkit- only for brevity. What this does:
Uses the former .bottom as first layer in stack
Replaces .bottom with a html element mimicking the image in your fiddle. Could be a png with transparency, too.
Listen for :hover state on #cf instead of .bottom or .top
Fade the former .bottom in, rotate the former .top

Answer 3

you can't use several transitions on an element,
if you want to apply transition to several properties you can use "all"
transition: all 1s;
or comma separated transition:
transition: opacity 1s, transform 0.8s;

Answer 4

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