animatie: blur en gruijs wil niet werken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Production Engineer

Supermicro® (NASDAQ: SMCI), the leading innovator in high-performance, high-efficiency server technology, is a premier provider of advanced server Building Block Solutions® for Data Center, Cloud Computing, Enterprise IT, Hadoop/Big Data, HPC and Embedded Systems worldwide. Supermicro is committed to protecting the environment through its “We Keep IT Green®” initiative and provides customers with the most energy-efficient, environmentally-friendly solutions available on the market. Supermicro Computer B.V. is seeking a: Production Engineer Who is responsible for the assembly and building of Supermicro product that meet products quality requirements and shipment deadlines. This position will be located in the HMEA headquarters in 's-Hertogenbosch,

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

11/12/2018 18:10:04
 
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.