Анимированный div, кажется, возводится снизу справа, а преобразование-происхождение установлено в центр [дубликат]

avatar
Ewan Green
8 августа 2021 в 20:47
75
1
0

Я хочу масштабировать элемент div, сохраняя при этом его центрирование. перевести (-50%, -50%). Это работает по большей части, но как будто transform в div игнорируется. Когда происходит анимация, элемент div масштабируется и центрируется, но выглядит так, будто элемент div «выскакивает» (масштабируется) из правого нижнего угла (как будто преобразования не было до установки анимации).

@keyframes scaleAnimation
{
    from
    {
        transform: scale(0.75) translate(-50%, -50%);
    }
    to
    {
        transform: scale(1) translate(-50%, -50%);
    }
}

.parentClass
{   
    position: absolute;
    top: 50%;
    left: 50%;

    transform-origin: center;
    transform: translate(-50%, -50%);
    
    animation: scaleAnimation 0.3s;
}

Какое решение (в идеале) не требует JavaScript?

Источник
Temani Afif
8 августа 2021 в 21:20
0

центр, затем масштаб

Ewan Green
8 августа 2021 в 21:28
0

@TemaniAfif Спасибо! Ты спасатель.

Ответы (1)

avatar
amirify
8 августа 2021 в 21:11
1

В transforms порядок имеет значение. Я отредактировал ваш код. Надеюсь, это то, что вы ищете:

@keyframes scaleAnimation
{
    from
    {
        transform: translate(-50%, -50%) scale(0.75) ;
    }
    to
    {
        transform: translate(-50%, -50%) scale(1);
    }
}

.parent-class
{   
    width: 100px;
    height: 100px;
    background: #4565ff;
    position: absolute;
    top: 50%;
    left: 50%;

    transform-origin: center center;
    transform: translate(-50%, -50%);
    animation: scaleAnimation 1s infinite;
}
<div class="parent-class"></div>