Question

我在悬停时有一个带动画背景的按钮。它从左到右填充彩色背景，但是目前在鼠标输出时它会反转动画;颜色向左缩回并消失。在鼠标输出时，我希望填充继续从左向右移动，以便它从按钮右侧消失。有任何想法吗？在“访问网站”上可以看到这方面的一个例子。按钮在这里：

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

理想情况下，我想使用CSS3动画做到这一点，但是我觉得css3动画的活动/非活动状态可能是限制因素。如果使用CSS3无法使用jQuery完成任何想法？一个jsfiddle非常感谢！

感谢您的帮助！

Answer 1

准备一些很酷的东西...你需要使这个多浏览器友好，但这很容易。这是准备好的ff

这是fiddle

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

你会有很多问题......

CSS3动画：不活动，活动和附加'结束'状态？

1 个答案: