Trying to get a css3 hover off transition working with my code

StackOverflow https://stackoverflow.com/questions/23199899

  •  07-07-2023
  •  | 
  •  

Question

What i what to do is for the icons to roll back when you take the cursor off of the images. At present they roll when they're hovered on but when i hover off i wanted them to roll back to their initial place.. Any ideas? 

<head>

<style>


ul#roller> li {
    float: left; 
    padding: 20px; 
    border-radius: 60px;
    width: 80px; 
    height: 80px; 
    margin-left: 10px; 
    margin-top: 90px;
    }

ul#roller> li:nth-child(1) {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/1.png') center center no-repeat ;
}

ul#roller> li:nth-child(2) {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/2.png') center center no-repeat ;
}

ul#roller> li:nth-child(3) {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/3.png') center center no-repeat ;
}

ul#roller> li:nth-child(4) {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/4.png') center center no-repeat ;
}

ul#roller> li:nth-child(5) {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/5.png') center center no-repeat ;
}

ul#roller:hover li {
    animation: rotate 2s; 
    -webkit-animation: rotate 2s;
    }

ul#roller:hover {   
    margin-left: 100px;
    }

#roller {
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    height: 400px;    
}

#shelf {
    background: url('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/shelf.jpg') center center no-repeat ;
    background-size: 900px;
}

@keyframes rotate { 
    0% {
    translate(0px, 0px;)
        }
    100% {
    transform: rotate(360deg) 
    translate(0px, 0px);
        }
}

@-webkit-keyframes rotate { 
    0% {
    translate(0px, 0px;)
        }
    100% {
    -webkit-transform: rotate(360deg) 
    translate(0px, 0px);
        }
}


</style>

<script>

</script>

</head>





<body>


<div id ="shelf">
<ul id="roller">
    <li id="#roller"></li>
    <li id="#roller"></li>
    <li id="#roller"></li>
    <li id="#roller"></li>
    <li id="#roller"></li>
</ul>
</div>


</body>

</html>
Was it helpful?

Solution

The animation is defined only in the :hover state. You need to define the reverse animation for the default state. Use animation-direction: reverse

Another alternative is to use a transition. Add the appropriate prefixes, of course.

ul#roller li {
    transition: transform 2s;
}
ul#roller:hover li {
    transform: rotate(360deg);
}

OTHER TIPS

If you want the effect run when the mouse is over or leaving the element, you don't need the animation but the transition. The animation runs automatically and the transition when the user interacts with the element.

So you can put the transform in the :hover and the transition in the regular element rule. Add this to the #roller li rule:

-webkit-transition: all 2s;
transition: all 2s;

And this to the #roller:hover li:

-webkit-transform: rotate(360deg);
transform: rotate(360deg);

See it in action here: http://jsfiddle.net/XVjUj/1/

Anyway, I've deleted the id's of the li elements: you don't need them, every id must be unique and never put the # before the id in the HTML attribute. I've cleaned up a bit the CSS too.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top