Centered animation is consistently off-center - html

Question

I've been struggling with this for the past few days, so help would be greatly appreciated. I have a Title with a line (hr element) right below it. I'm trying to have a div centered in the hr that grows and shrinks. However, when the css3 animation is applied it causes the div to be displaced down and to the right, as if the div's top-left point (which I think is (0,0)) is set to be where the middle was.
I've created a jsfiddle to illustrate what I mean.
Here's my html:
<div id="header">
<h1>Center</h1>
<div id="action-bar">
<hr class="center-line" />
<div class="circle animation"></div>
</div>
</div>
and my css:
div#header {
color: #000;
width: 90%;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
div#header h1 {
font-size: 50px;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
}
/* the line beneath h1 */
div #action-bar {
margin: 25px 0;
position: relative;
}
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
div.circle:hover {
width: 2em;
height: 2em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
hr.center-line {
border: 0;
height: .25em;
background: #000;
}
/* animation */
#keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
Can anybody point be in the right direction? I'm looking for a pure-css solution if possible. Thanks!

Answer 1

Add negative margin to your circle element, half of it's width and height:
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin-left: -0.5em;
margin-top: -0.5em;
}
div.circle:hover {
width: 2em;
height: 2em;
margin-left: -1em;
margin-top: -1em;
}
jsFiddle Demo.

Answer 2

Here is a smooth pulsing option.
http://jsfiddle.net/aLjsut5r/4/
/* animation */
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
.pulsing {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}