CODEWITHSUNDEEP
cssanimationborder
Ka' de Xaeoc
Ka' de Xaeoc

Reputation: 63

CSS3 border animation ghost

I have this little border animation but has a ghost in the left top corner, a black dot, I don't know how to get rid of it... You can check it here: 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);
    }
    }

Upvotes: 0

Views: 212

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

use forwards should be animation: ondas1 1s ease-out forwards;

demo - http://codepen.io/victorfdes/pen/EjNWNY

more explanation about animation-fill-mode

after the animation is complete it goes to default state which has border 3px thats the reason you are seeing the rounded element at the left top once you use forwards the animation doesnt go the the default stated instead it goes to the last state in the keyframe

Upvotes: 1

Delto
Delto

Reputation: 331

It's due to the border in ondas1. This should remedy your issue.

Sample

CSS

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

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

.ondas1 {
  border-radius: 50%;
  border-width: 3px;
  border-style: solid;
  left:-10px;  
  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);
  }
}

Upvotes: 0

Related Questions