Leon Arnott's Site - Liens en vrac de sebsauvage
mardi 3 septembre 2013 à 13:49 Famille Michon, le 03/09/2013 à 13:49
Ce support par CSS3 des animations et des keyframes (on donne le style à x % du temps de la boucle, le navigateur s'arrange pour faire la transition) est impressionnant (et ça fait peur aussi) :
blink
{
text-decoration: none;
animation: fade-in-out 1s steps(1,end) infinite alternate;
-webkit-animation: fade-in-out 1s steps(1,end) infinite alternate;
}
---
@keyframes fade-in-out
{
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
@-webkit-keyframes fade-in-out
{
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
---
@keyframes rumble
{
0%, 100% {}
50% { transform: translateY(-0.2em) }
}
@-webkit-keyframes rumble
{
0%, 100% {}
50% { -webkit-transform: translateY(-0.2em) }
}
---
@keyframes appear
{
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes appear
{
0% { opacity: 0 }
100% { opacity: 1 }
}
(Permalink)
Ce support par CSS3 des animations et des keyframes (on donne le style à x % du temps de la boucle, le navigateur s'arrange pour faire la transition) est impressionnant (et ça fait peur aussi) :
blink
{
text-decoration: none;
animation: fade-in-out 1s steps(1,end) infinite alternate;
-webkit-animation: fade-in-out 1s steps(1,end) infinite alternate;
}
---
@keyframes fade-in-out
{
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
@-webkit-keyframes fade-in-out
{
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
---
@keyframes rumble
{
0%, 100% {}
50% { transform: translateY(-0.2em) }
}
@-webkit-keyframes rumble
{
0%, 100% {}
50% { -webkit-transform: translateY(-0.2em) }
}
---
@keyframes appear
{
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes appear
{
0% { opacity: 0 }
100% { opacity: 1 }
}
(Permalink)