关键帧在边框动画中不起作用。

Question

我只是想创建CSS-3的简单边界的动画，但不知何故，似乎失败，无法正常工作FIDDLE HERE

CODE：

a { 
    display: inline-block; 
    margin-top: 4em; 
    padding: 2em 5em; 
    background: #eee; 
    color: #000; 
    position: relative; 
    /*width: 120%;*/ 
} 
a:before { 
    content:''; 
    position: absolute; 
    top: 0; 
    left: 10%; 
    right: 10%; 
    height: 5px; 
    display: block; 
    background: #c107b4; 
} 
a:hover:before { 
    -webkit-animation-delay: .3s; 
    -o-animation-delay: .3s; 
    animation-delay: .3s; 
    -webkit-animation-name: borderanim; 
    -o-animation-name: borderanim; 
    animation-name: borderanim; 
} 
@-moz-keyframes borderanim { 
    from { 
     width: 10%; 
    } 
    to { 
     width: 100%; 
    } 
} 
@keyframes borderanim { 
    from { 
     width: 10%; 
    } 
    to { 
     width: 100%; 
    } 
} 

那么，如果不是使用一个自定义动画，如果我做到以下几点：

a:hover:before { 
    width: 100%; 
    left: 0; 
    right: 0; 
    -webkit-transition: width 5s; 
    -o-transition: width 5s; 
    transition: width 5s; 
} 

边框动画作品（无这里虽然使用关键帧），它的工作原理，但有glinch。我更喜欢关键帧动画。有人可以告诉我我做错了什么？

谢谢。

亚历-Z。

Answer 1

必须分配动画持续时间才能看到变化 你的情况下动画的0.0s。必须分配一些时间来看看动画e.g

tag-name 
{ 
animation-name:animate; 
animation-duration:2s; 
} 
@keyframes animate 
{ 
from{background:black;} 
to{background:white;} 
} 

Answer 2

可以使用-webkit-animation代替-webkit-animation-name并给予一定的动画时长。

DEMO

a:hover:before { 
    -webkit-animation: borderanim 5s; 
    -o-animation: borderanim 5s; 
    animation: borderanim 5s; }