Question

当我从图像上取下光标时，我要做的是让图标回滚。目前他们在他们徘徊时滚动，但当我徘徊时，我希望他们回到他们的初始位置..任何想法？

<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>

Answer 1

动画仅在:hover状态下定义。您需要为默认状态定义反向动画。使用animation-direction: reverse

另一种选择是使用转换。当然，添加适当的前缀。

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

Answer 2

如果您希望在鼠标结束或离开元素时运行效果，则不需要动画而是转换。当用户与元素交互时，动画自动运行并进行转换。

因此，您可以将transform放在常规元素规则中的:hover和transition中。将其添加到#roller li规则：

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

这是#roller:hover li：

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

在此处查看此行动：http://jsfiddle.net/XVjUj/1/

无论如何，我已经删除了li元素的id：你不需要它们，每个id必须是唯一的，并且永远不要把＃之前的＃放在HTML属性中。我也清理了一下CSS。

尝试使用我的代码将css3悬停在转换过程中

2 个答案: