CSS transitions on child element when hovering the parent

css, css-transforms, css-transitions, html

Solution

transform is not cross browser compatible you still have to target specific browsers.

.parent:hover > .child {
    transform: translate(0,-42px);
    -webkit-transform: translate(0,-42px);
    -moz-transform: translate(0,-42px);
    -o-transform: translate(0,-42px);
    -ms-transform: translate(0,-42px);
}

Problem

I'm trying to figure out how to "animate" the child of a hovered element. How is this so complicated to get it work across multiple browsers? what's the best practise? ``` .parent { -moz-transition:-moz-transform 180ms; -webkit-transition:-webkit-transform 180ms; -o-transition:-o-transform 180ms; transition:transform 180ms; } .parent:hover > .child { transform: translate(0,-42px); } ``` http://jsfiddle.net/KKrdA/2/ works in firefox or ``` .parent { -moz-transition:top 180ms; -webkit-transition:top 180ms; -o-transition:top 180ms; transition:top 180ms; } .parent:hover > .child { top:-42px; } ``` http://jsfiddle.net/KKrdA/1/ works with webkit browsers

Original source