html - 动画返回 css 动画

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/ (右三圈)但是，当您将鼠标悬停在社交框区域后离开时，文本颜色会跳回透明。我想让它恢复动画。我该怎么做？

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 */
}