CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
yardarrat
yardarrat

Reputation: 290

CSS transitions on child element when hovering the parent

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

Upvotes: 3

Views: 9849

Answers (1)

raam86
raam86

Reputation: 6871

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);
}

Upvotes: 8

Related Questions