animatie: blur en gruijs wil niet werken

Door Jan R op 21-04-2016 10:30

3.067 views


.wazig{
	animation: wazig 10s linear infinite;
}
@keyframes wazig {
	0% {filter: blur(0px);}
	10%{filter: blur(1px);}
	20%{filter: blur(2px);}
	30%{filter: blur(3px);}
	40%{filter: blur(4px);}
	50%{filter: blur(5px);}
	60%{filter: blur(4px);}
	70%{filter: blur(3px);}
	80%{filter: blur(2px);}
	90%{filter: blur(1px);}
	100%{filter: blur(0px);}
}

.grijs{
	animation: grijs 10s linear infinite;
}
@keyframes grijs {
	0%{filter: grayscale(00%);}
	10%{filter: grayscale(00%);}
	20%{filter: grayscale(20%);}
	30%{filter: grayscale(40%);}
	40%{filter: grayscale(60%);}
	50%{filter: grayscale(100%);}
	60%{filter: grayscale(80%);}
	70%{filter: grayscale(60%);}
	80%{filter: grayscale(40%);}
	90%{filter: grayscale(20%);}
	100%{filter: grayscale(00%);}
}

Hoi

Wat is mis met deze code. Er gebeurd gewoon niets.
blur(5px); en grayscale(100%); zou toch goed te zien moeten zijn.

Ik test ze wel afzonderlijk

Jan

Ward van der Put

21-04-2016 11:29

Het lijkt een compatibiliteitsprobleem, dus ligt het deels aan je browser. In Google Chrome werkt het eerste filter bijvoorbeeld pas wanneer je filter door -webkit-filter vervangt:


.wazig {
  animation: wazig 10s linear infinite;
}
@keyframes wazig {
    0% {-webkit-filter: blur(0px);}
   10% {-webkit-filter: blur(1px);}
   20% {-webkit-filter: blur(2px);}
   30% {-webkit-filter: blur(3px);}
   40% {-webkit-filter: blur(4px);}
   50% {-webkit-filter: blur(5px);}
   60% {-webkit-filter: blur(4px);}
   70% {-webkit-filter: blur(3px);}
   80% {-webkit-filter: blur(2px);}
   90% {-webkit-filter: blur(1px);}
  100% {-webkit-filter: blur(0px);}
}

Jan R

21-04-2016 13:00 gewijzigd op 21-04-2016 13:04

En google maar beweren dat zij 100% html5 compatibel zijn :)

Bedankt. ook grijs werkt nu. Toch in chrome. ie11 niet. blijkbaar ondersteunt ie dit niet :(

Jan

Ik heb het hun geschreven :)

Wouter J

21-04-2016 13:04

En google maar beweren dat zij 100% html5 compatibel zijn :)

We praten hier ook over CSS3 en niet HTML5 (en wellicht dat niet eens, de filter spec is nog in bijna pre-alpha state).

Zie hier een goed overzicht over welke prefixes je moet gebruiken en wie wat support: http://caniuse.com/#search=filter

Reageren

Inloggen om te reageren