Question

我写了以下css动画：

@-webkit-keyframes shadow {
    from {
        color: rgba(200, 200, 200, 0);
    }
    to {
        color: rgba(200, 200, 200, 1);
    }
}
#social .items div:hover span{
    -webkit-animation: shadow 0.4s linear 0.5s 1 alternate;
    -webkit-animation-fill-mode: forwards;
}

你可以在这里看到结果：http://mklmb.bplaced.de/page/（右边3个圆圈）但是，当你在悬停它之后离开社交盒的字段时，文本颜色会跳回到透明状态。我想让它回归动画。我怎么能这样做？

Answer 1

您是否尝试过使用transition？ http://jsbin.com/waxayu/1/edit

#social .items div span{
  color: rgba(200, 200, 200, 0);
  transition: color 0.4s linear 0s;  /* Fade out immediately on mouseleave */
}
#social .items div:hover span{
  color: rgba(200, 200, 200, 1);
  transition: color 0.4s linear 1s;  /* On hover wait 1s,  than fade in */
}

Answer 2

<强>＆＃34;动画填充模式＆＃34; [前进/后退] 是您正在寻找的

通常它的持续时间与原始时间相同，但您可以设置自定义持续时间，如下例所示：

-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-duration: 0s;
animation-duration: 0s;

请参阅http://jsfiddle.net/20awhhwy/

动画回动css动画

2 个答案: