html - 居中动画始终偏心

在过去的几天里，我一直在为此苦苦挣扎，因此非常感谢您的帮助。我的标题下方有一行（hr元素）。我正在尝试使div集中在可增长和收缩的小时数上。但是，当应用css3动画时，它会使div向下和向右移动，就好像div的左上角点（我认为是（0,0））被设置为中间位置一样。

我创建了一个jsfiddle来说明我的意思。

这是我的html：

<div id="header">
    <h1>Center</h1>

    <div id="action-bar">
        <hr class="center-line" />
        <div class="circle animation"></div>
    </div>
</div>

和我的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;
}

有人能指出正确的方向吗？如果可能，我正在寻找纯CSS解决方案。谢谢！

最佳答案

向您的circle元素添加负边距，其中一半为width和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。