Question

有动画的例子：

.b-ball_bounce {transform-origin: top;}
@-webkit-keyframes ball_animation {
    20%   {transform: rotate(-9deg);}
    40%  {transform: rotate(6deg);}
    60%  {transform: rotate(-3deg);}
    80% {transform: rotate(1.5deg);}
    100% {transform: rotate(0deg);}
}
.b-ball_bounce:hover {
  -webkit-animation: ball_animation 1.5s;
  animation-iteration-count: 1;
}

当鼠标悬停时，元素动画开始。但是当鼠标离开时，动画会立即停止。但我想在鼠标离开后完成动画。

这是借助JavaScript的示例：http://codepen.io/Profesor08/pen/pvbzjX 我想用纯CSS3做同样的事情，它现在看起来如何：http://codepen.io/Profesor08/pen/WbxeoW

Answer 1

你可以通过过渡做很多事情：

#some-div {
    background-color: rgba(100,100,0,0.2);
    transition: background-color 0.5s ease;
}
#some-div:hover { background-color: rgba(100,0,0,0.7); }

查看JSfiddle或查看here了解更多

Answer 2

CSS可能在某些情况下有所帮助，但不是全部，下面是将在悬停和悬停后设置字母间距动画的代码。

＆＃13;

h1
{
    -webkit-transition:all 0.3s ease;
}

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}

＆＃13;

<body>
    <h1>Hello</h1>
</body>

＆＃13;

如何继续CSS动画：鼠标悬停后悬停元素？

2 个答案: