1

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 значение выделенное жирным шрифтом?

1 ответ 1

0

Если я верно Вас понял, то вот решение при помощи @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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.