animatie: blur en gruijs wil niet werken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

21/04/2016 10:30:36
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.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
 
PHP hulp

PHP hulp

29/03/2024 07:12:46
 
Ward van der Put
Moderator

Ward van der Put

21/04/2016 11:29:47
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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

Jan R

21/04/2016 13:00:01
Quote Anchor link
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 :)
Gewijzigd op 21/04/2016 13:04:38 door Jan R
 
Wouter J

Wouter J

21/04/2016 13:04:15
Quote Anchor link
Quote:
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.