css3 animation on :hover; force entire animation

2019-01-03 10:16发布

站内问答 / CSS3
509 4 4

I've created a simple bounce animation which i'm applying to the :hover state of an element:

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}

.box:hover { 
    animation: bounce 1s;
}

The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hover state. I'm not looking for a javascript solution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?

Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/

4条回答
一夜七次
2楼-- · 2019-01-03 10:44

CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.

h1
{
    -webkit-transition:all 0.3s ease;
}

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}
<body>
    <h1>Hello</h1>
</body>

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-01-03 10:45

A simple trick will do the job : 

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

Set the 'delay' with an high value on the element (not :hover).

From: Stackoverflow - Robert McKee

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2019-01-03 11:00

I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

http://jsfiddle.net/u7vXT/

查看更多
0人赞 添加讨论(0) 举报
一夜七次
5楼-- · 2019-01-03 11:01

just to improve Duopixel answer, when runnig infinite animitation I have to do:

$(".box").css("animation-iteration-count", "1"); 
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(".box").css("animation-iteration-count", "infinite"); 
  $(this).addClass("animated");        
})

This just not abruptly end the animation.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)