Как сделать постоянно изменяющий ширину блок?

Question

[0leg5ergeev]

Не умею в анимации css, читаю-перечитываю. Гугл конкретного ответа не дал.Но всё же: как сделать блок, который постоянно изменяет свою ширину от 100px до 150px, например, и обратно?

Answer 1

[Defman21]

Так, например.

@keyframes test {
    0% {
        width: 100px;
    }
    
    50% {
        width: 150px;
    }
    
    100% {
        width: 100px;
    }
}

div.test {
    animation: test 1s ease 0s infinite;
}

Можно и так наверно, но я не уверен)

@keyframes test {
    0% {
        width: 100px;
    }
    
    100% {
        width: 150px;
    }
}

div.test {
    animation: test 1s ease 0s infinite alternate;
}

Comments

[0leg5ergeev]

большое спасибо, второй вариант работает

Answer 2

[Тоша Марсик]

можно скриптик написать простенький опираясь на tweenmax.js . Там есть такие фичи.

Зеленый Носок

Comments

[0leg5ergeev]

интереснее на css, в моём случае