尝试使用我的代码使 css3 悬停过渡答案

【问题标题】：Trying to get a css3 hover off transition working with my code尝试使用我的代码使 css3 悬停过渡
【发布时间】：2014-04-22 00:31:18
【问题描述】：

当您将光标从图像上移开时，我要做的是让图标回滚。目前，它们在悬停时滚动，但当我悬停时，我希望它们回滚到初始位置。有什么想法吗？

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

【问题讨论】：

标签： css animation transition

【解决方案1】：

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

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

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

【讨论】：

嗯.. 两者都试了，但没有任何改变。
我在 CodePen 上放了一个例子：codepen.io/anon/pen/trjCd 对齐已关闭，但我认为它可以满足您的需求。

【解决方案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 属性中将 # 放在 id 之前。我也清理了一些 CSS。

【讨论】：