CSS3 border animation ghost - css

Question

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

Answer 1

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

Answer 2

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