Можно ли анимировать filter:drop-shadow()?

Question

[DaniilPo]

Добрый день, мне нужно анимировать в js filter: drop-shadow();
Суть в чём, у меня есть объект который перемещается по сайту и разумеется если поставить просто filter: drop-shadow(); и не анимировать его то это выглядит убого по этому мне нужно анимировать так что бы тень перемещалась в месте с объектом, можно ли так сделать ?

Comments

[Ankhena]

Что вы делали и что у вас не получилось?
Сюда jsfiddle.net

[DaniilPo]

Ankhena, а вы можете сказать можно ли анимировать filter: drop-shadow(); и если да то как, дальше со всем я справлюсь просто на просторах интернета (может конечно и плохо гуглил) я не нашёл как анимировать эту тень
через css мне будет не очень удобно если через js это нельзя сделать то так и скажите
Благодарю

[Ankhena]

DaniilPo, точно также как любое другое анимируемое свойство.

Вообще сложно представить как получилось так, что объект уехал, а тень осталась.

[DaniilPo]

Ankhena, нет другое имею в виду

spoiler

вот условно говоря солнце которое светит на объект
но если объект например повернёт или переместится в другое место то это будет выглядеть примерно таким образом

spoiler

по этому мне нужно помимо объекта который имеет эту тень нужно анимировать и саму тень что бы она перемещалась вокруг объекта
извините если я не правильно задал вопрос

[Ankhena]

DaniilPo, за сдвиг тени отвечают первые два параметра

[DaniilPo]

Ankhena, да я это знаю, но как анимировать этот сдвиг, именно с этим у меня и проблема так как если объект переместится а тень буквально телепортируется это будет не очень выглядеть

[Ankhena]

DaniilPo, даже не знаю, что вам еще написать.

Ну пусть до будет так

filter: drop-shadow(0 -10px 10px rgba(255, 0, 0, 1));

а после так

filter: drop-shadow(0 10px 10px rgba(255, 0, 0, 1));

Была сверху объекта, стала снизу.

Через JS можете пользоваться кастомными свойствами, это удобно.

<code>  filter: drop-shadow(0 var(--shift) 10px rgba(255, 0, 0, 1));</code>

До
--shift: -10px;
после
--shift: 10px;

https://jsfiddle.net/78692dmb/

Answer 1

[Tsoroy]

Можно, но опять же через @keyframes

@keyframes имя_анимации {
        0% {filter: drop-shadow(свойства_в_начале)}
        50% {filter: drop-shadow(свойства_в_середине)}
        100% {filter: drop-shadow(свойства_в_конце)}
}

Надеюсь как прописать свойства сами знаете