box-shadow:1px 2px 3px 0 rgba(15, 65, 33, 0.08), 5px 10px 20px 0 rgba(18, 43, 26, 0.12);
Как используя animate() изменить изменить за 5 сек. от 0 до 20px значение выделенное жирным шрифтом?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли я верно Вас понял, то вот решение при помощи @keyframes{ to {...} }
и animation-fill-mode: forwards;
, который остановит анимацию на последнем кадре :
div {
margin: 50px;
box-shadow:
1px 2px 3px 0 rgba(15, 65, 33, 0.08),
5px 10px 20px 0 rgba(18, 43, 26, 0.12);
animation: shadow 5s;
animation-fill-mode: forwards;
}
@keyframes shadow {
to {
box-shadow:
1px 2px 3px 20px rgba(15, 65, 33, 0.08),
5px 10px 20px 0 rgba(18, 43, 26, 0.12);
}
}
<div> </div>