动画回CSS动画

我写了下面的CSS动画：动画回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; 
}

，你可以在这里看到的结果：（右3圈）http://mklmb.bplaced.de/page/ 但是，当你徘徊后，离开社会箱领域它，文本颜色只是跳回到透明。我想让它动画回来。我该怎么做？

来源

2014-09-11 T_01

您是否尝试过使用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 */ 
}

来源

2014-09-11 01:38:17

也许..这是一个好主意^^我不知道一个回合转换的延迟属性...谢谢！ – 2014-09-11 14:19:55

“动画填充模式” [向前/向后]是你正在寻找

通常它会比原来相同的持续时间，但你可以设置如自定义时间在这个例子中：

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

看到http://jsfiddle.net/20awhhwy/

来源

2014-09-11 08:53:39 sebilasse

不起作用。它只是跳转到开始帧。（铬） – 2014-09-11 14:19:08

动画回CSS动画

回答

相关问题