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

边框动画可以工作（虽然这里没有使用关键帧。），但是有效，但有一点点。我更喜欢关键帧动画。谁能告诉我我做错了什么？

谢谢。

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

关键帧无法在边框动画中使用。

2 个答案: