Jak animować obrazek z szarego do kolorowego bez efektu hover ?

Question

Problem przedstawiony w nagłówku tematu.

Answer 1

@keyframes animacja {

    0% {
    filter: grayscale(100%);
}


  100% {
 filter: grayscale(0%);
}
}

animation: animacja 5s linear 5s;

Pierwsze wrzucasz byle gdzie w kodzie a drugie do animowanego elementu.

Animacja - nazwa animacji

5s (pierwsze) - czas trwania

Linear - nie wzrasta/maleje szybkosc

5s (drugie) - delay

Comments

Jak chcesz zapetlona animacje to zamiast 100% daj 50%, i dodaj 100% takie samo jak 0%. Następnie do animation dopisz infinite na końcu

Answer 2

https://www.w3schools.com/css/css3_animations.asp

albo

https://www.w3schools.com/css/css3_transitions.asp

Comments

No dobrze. Pojawia się zdjęcie, zatrzymuje się i wtedy wówczas zmienia się z szarego na kolorowy. Umiesz tak ? Kombinowałem z setTimeout i nie bardzo wiem jak to zrobić.

Answer 3

Zrobisz to za pomocą „css filter”