animatie: blur en gruijs wil niet werken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

Bekijk vacature »

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

16/08/2018 14:15:10
 
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.