如何停止animation属性移动元素？

Question

我有一个绝对位置的圆形元素，并对其进行了平移以使其出现在其父div中。我已经为其分配了一个动画，使它使用scale属性显得缓慢地脉动，但是当动画处于活动状态时，该元素向下和向右移动并完全忽略了绝对位置，为什么？

.marker {
                    animation: pulse 3s infinite;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    height: 60px;
                    width: 60px;
                    border-radius: 100%;
                    background: rgba($yellow, 0.3);
                    border: 2px solid $yellow;
                    @include translate(-50%, -50%);
                    &:after {
                        content: '';
                        display: block;
                        height: 20px;
                        width: 20px;
                        border-radius: 100%;
                        background: $yellow;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        @include translate(-50%, -50%);
                    }
                    @keyframes pulse {
                        0% {
                            @include transform(scale(1.1));
                        }
                        100% {
                            @include transform(scale(1));
                        }
                    }

                }

就像将动画应用于元素时，@ include translate（-50％，-50％）并没有执行任何操作。如果删除动画，它将显示在其父div的中心。