CSS3动画问题

这是可能的,至少在Webkit中定义为“转发”的“动画填充模式”。我得到了这样的代码的结果:

@-webkit-keyframes test {
  100% { background-color: #0000ff; }
} 

a { background-color: #ff0000; }

a:hover { -webkit-animation: test 1s 1 ease forwards }

请注意,不需要在0%keyframe中指定开始颜色,在:hover中指定结束颜色。

当然,这段代码是特定于Webkit的。我没有尝试过在其他浏览器中使用其他供应商的前缀或常规的“animation”属性。

将结束值放在主css类中,将开始值放入动画关键帧的0%:

@keyframes test {
  0% {
    background-color: #ff0000; /* start value */
  }
  100% {
    background-color: #0000ff;
  } 
}

a {
  background-color: #ff0000; /* normal state */
}

a:hover {
  animation-name: test;
  animation-duration: 1s;
  background-color: #ff0000; /* final state, after animation is finished */
}

如果这个问题仍然悬而未决,我认为用CSS3动画是不可能的 currently specified :

但是,您应该能够使用CSS3转换来获得基本效果。有一个 slide in the html5rocks.com presentation 这说明了如何做到这一点。以下是相关[释义]摘录:

#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }

// Run this to animate to the left
document.getElementById('box').className = 'left';

// Run this to animate to the right
document.getElementById('box').className = 'right';

动画填充模式:向前 动画填充模式CSS属性指定CSS动画在执行之前和之后应如何将样式应用于其目标