animatie: blur en gruijs wil niet werken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Web Ontwikkelaar PHP, Nijmegen

Contactpersoon Roel Kavelaar rkavelaarATsearch-consult.nl 0243528815 0644949337 Organisatie Jong, gezond en sterk groeiende bedrijf dat webbased multimedia oplossingen bouwt in de omgeving Nijmegen. Het bedrijf bouwt voor klanten o.a. geavanceerde websites, webwinkels, webapplicaties en specifieke webbased software. Het bedrijf ontwikkelt en onderhoudt ook verschillende bekende Nederlandse websites. Op dit moment hebben zij een groeiende en brede klantenkring opgebouwd. Met betrekking tot programmeer-, onderhoud-, ontwerp-werkzaamheden wordt een PHP ontwikkelaar gezocht met kennis van contentmanagementsysteemen en frameworks. Locatie Nijmegen Verantwoordelijkheden (Her)Ontwerpen en (her)ontwikkelen in PHP ten behoeve van websites voor klanten, project klussen, onderhoud en specifieke klantwensen (Her)Ontwerpen en (her)ontwikkelen in PHP, PHP

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

25/04/2019 04:53:04
Honeypot
 
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.