关键帧在边界动画中不工作

Question

我只是想在CSS-3中创建一个简单的边界动画，但不知何故，它似乎失败了，不工作FIDDLE HERE

代码:

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;
}

边界动画工作(这里没有使用关键帧)，它工作，但有一个小故障。我更喜欢关键帧动画。谁能告诉我我做错了什么?

谢谢。

Alex-z。

Answer 1

必须指定动画持续时间才能看到变化在你的例子中，它是0秒动画。必须分配一些时间看动画，例如

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

Answer 2

你可以用-webkit-animation代替-webkit-animation-name，并给一些动画持续时间

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