CSS3动画:不活动，活动和附加的‘结束’状态？

Question

我有一个按钮的动画背景悬停。它从左到右填充有颜色的背景，但是目前在鼠标上它反转动画；颜色向左收缩，然后消失。在鼠标出来的时候，我希望填充继续从左向右移动，这样它就会消失在右边的按钮上。有什么想法吗？在这里的“访问网站”按钮上可以看到这样的例子：

http://www.notashop.com.au/new/project/lifewithbird/

理想情况下，希望使用CSS3动画来实现这一点，但是我觉得css3动画的活动/非活动状态可能是这里的限制因素。如果不能用CSS3做，有什么想法用jQuery吗？一把小提琴就好了！

谢谢你的帮忙!

Answer 1

准备好什么酷的..。您将需要使这个多浏览器友好，但这很容易。THis已准备就绪

这是小提琴

.button {
    background: blue;
    width: 200px;
    height: 45px;
    position: relative;

}

.button:before {
    background: none repeat scroll 0 0 #FFFFFF;
    content: "";
    height: 45px;
    left: 100%;
    position: absolute;
    width: 200px;
    z-index: 1;
transition: all 0.5s ease;
}
.button:hover:before{
    -webkit-animation: left 1s;
  -moz-animation:    left 1s;
  -o-animation:      left 1s;
  animation:         left 1s;
  animation-fill-mode:forwards;
}
.button p{
    position: absolute;
    left: 50%;
    top: 5px;
    z-index: 2
}
@keyframes left {
    0% {left: -100%;}
    50% {animation-play-state: paused; }
    100%{left: 0%; animation-play-state: paused;}
}

你会有很多问题..。