PROJET AUTOBLOG


Shaarli - Les discussions de Shaarli

Archivé

Site original : Shaarli - Les discussions de Shaarli du 23/07/2013

⇐ retour index

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)