css - CSS3边框动画幽灵

我有这个小边框动画，但是在左上角有一个鬼影，一个黑点，我不知道该如何摆脱它……您可以在这里查看：http://codepen.io/xaeoc/pen/xGRgze

    body {
    background-color: #333;
    height: 230px;
    }

    .lluv {
    width: 230px;
    height: 230px;
    border: solid red 1px;
    position: absolute;
    left: calc(50% - 115px);
    }

    .ondas1 {
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    position: absolute;
    animation: ondas1 1s ease-out;
    }

    @keyframes ondas1 {
    0% {
    width: 0px;
    height: 0px;
    top: calc(50% - 0px);
    left: calc(50% - 0px);
    border-color: rgba(255, 255, 255, .7);
    }
    100% {
    width: 200px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    border-color: rgba(255, 255, 255, 0);
    }
    }

最佳答案

使用forwards应该是animation: ondas1 1s ease-out forwards;

演示-http://codepen.io/victorfdes/pen/EjNWNY

关于animation-fill-mode的更多说明

动画完成后，它会进入默认状态，该状态为border 3px，这就是使用forwards后您在左上角看到舍入元素的原因，动画不会达到默认状态，而是进入了最后一个状态keyframe

关于css - CSS3边框动画幽灵，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30448790/