Анимированная тень на JS не работает

198

21 мая 2018, 20:50

Прописываю анимацию для объекта на странице. Менять размеры получается. Всё отлично. Чего не скажешь про тень.

$(window).ready(function() {
    setInterval(function() {
        $(".loading_circle-small")
        .animate({boxShadow: '30px 3px 6px 3px #0003'}, 500)
        .animate({boxShadow: '3px 3px 6px 3px #0703'}, 500)
        .animate({boxShadow: '3px 30px 6px 3px #0003'}, 500)
        .animate({boxShadow: '3px 3px 60px 3px #0003'}, 1000)
    }, 4000)
})

У меня не только тень исчезает там, где она должна быть, не только не работает анимация, а и выбивает такую ошибку в консоли: "Ошибка при парсинге значения «box-shadow». Потерянное объявление." (К слову, выбивает ещё одну аналогичную ошибку: "Ошибка при парсинге значения «display». Потерянное объявление.", где display у меня имеет значение flex).

Какие меры я уже пробовал предпринимать?

писал значения с px и без px;
менял количество параметров в значении;
менял записи boxShadow, BoxShadow, box-shadow, брал в кавычки это свойство.

И всё безрезультатно.

Какие есть предложения, чтобы работали и тени? Интересует решение на JS.

Answer 1

http://api.jquery.com/animate/

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality.

то есть

Каждое анимируемое свойство должнo сводится к одному численному значению

.animated { 
  width:200px; 
  height:100px; 
  border:1px solid black; 
  animation: steps 2.5s; 
} 
 
@keyframes steps { 
  0% { 
  } 
  20% { 
    box-shadow: 30px 3px 6px 3px #0003; 
  } 
  40% { 
    box-shadow: 3px 3px 6px 3px #0703; 
  } 
  60% { 
    box-shadow: 3px 30px 6px 3px #0003; 
  } 
  100% { 
    box-shadow: 3px 3px 60px 3px #0003; 
  } 
}