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

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

边框动画有效（虽然此处未使用关键帧。），有效，但有问题。我更喜欢关键帧动画。谁能告诉我我做错了什么？

谢谢。

亚历克斯-z。

Answer 1

必须分配动画持续时间才能看到变化在您的情况下，它在 0.0 秒内动画化。必须分配一些时间看动画例如

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

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

keyframe not working in border animation.

html

css

keyframe