Анимация css движется не равномерно от изначальной точки

Question

Знатоки, нужен хелп. Имеется анимация расширяемого круга от точки, но движется он как то в сторону, а не равномерно во все стороны от неё. Подскажите как исправить проблему. Занимаюсь анимациями недавно(

.changegalview{
    margin: 20px 20px;
}
    
.changegalview .circle1{
        border-radius: 50%;
        border: solid 3px #333;
      /*  transform: translateX(-80%) translateY(-20%); */
        position: absolute;
        opacity: 0.2;
        animation: changegalview 2s linear infinite 0.25s;
       top: 15px;
        left: 38px;
}
      
@keyframes changegalview {
      50% {
        width: 30px;
        height: 30px;
        opacity: 0.5; 
      }
    
      75% {
        width: 40px;
        height: 40px;
        opacity: 0.2; 
      }
    
      100% {
        width: 50px;
        height: 50px;
        opacity: 0.05; 
      } 
}

<span class="changegalview" data-type="map">
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="#f50101">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0046 25C13.0046 25 23.2319 18.1818 23.2319 10.2273C23.2319 7.51483 22.1544 4.91348 20.2364 2.9955C18.3184 1.07751 15.7171 0 13.0046 0C10.2922 0 7.69083 1.07751 5.77284 2.9955C3.85486 4.91348 2.77734 7.51483 2.77734 10.2273C2.77734 18.1818 13.0046 25 13.0046 25ZM16.4164 10.2272C16.4164 12.11 14.8901 13.6363 13.0073 13.6363C11.1246 13.6363 9.59826 12.11 9.59826 10.2272C9.59826 8.3444 11.1246 6.8181 13.0073 6.8181C14.8901 6.8181 16.4164 8.3444 16.4164 10.2272Z" fill="#BDBDBD"></path>
    </svg>
    <span class="circle1"></span>
</span>

Answer 1

Вот так, видимо?

.changegalview{
    margin: 20px 20px;
}
    
.changegalview .circle1{
        border-radius: 50%;
        border: solid 3px #333;
      /*  transform: translateX(-80%) translateY(-20%); */
        position: absolute;
        opacity: 0.2;
        animation: changegalview 2s linear infinite 0.25s;
       top: 60px;
        left: 60px;
}
      
@keyframes changegalview {
      0% {
        top: 60px;
        left: 60px;
        width: 0px;
        height: 0px;
        opacity: 0.5; 
      }
    

    
      100% {
        top: 35px;
        left: 35px;
        width: 50px;
        height: 50px;
        opacity: 0.05; 
      } 
}

<span class="changegalview" data-type="map">
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="#f50101">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0046 25C13.0046 25 23.2319 18.1818 23.2319 10.2273C23.2319 7.51483 22.1544 4.91348 20.2364 2.9955C18.3184 1.07751 15.7171 0 13.0046 0C10.2922 0 7.69083 1.07751 5.77284 2.9955C3.85486 4.91348 2.77734 7.51483 2.77734 10.2273C2.77734 18.1818 13.0046 25 13.0046 25ZM16.4164 10.2272C16.4164 12.11 14.8901 13.6363 13.0073 13.6363C11.1246 13.6363 9.59826 12.11 9.59826 10.2272C9.59826 8.3444 11.1246 6.8181 13.0073 6.8181C14.8901 6.8181 16.4164 8.3444 16.4164 10.2272Z" fill="#BDBDBD"></path>
    </svg>
    <span class="circle1"></span>
</span>

БЛОГ НА HUSL

Анимация css движется не равномерно от изначальной точки

Ответы (1 шт):