Script CSS : Animation Css3

En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.

Script mis à jour le 16/12/14

Description du script CSS :

Animation de sphère Css3

Droits d'utilisations de ce script CSS :

Je peux revendre ce script

Je peux l'utiliser plusieurs fois

Je peux l'utiliser pour mes clients

Je peux modifier ce script

Je dois citer l'auteur du script

<div id='wrapper'>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div></div>/*CSS*/html {  background: #111;  overflow: hidden;}#wrapper {  height: 0;  width: 0;  position: relative;  left: 50%;  top: 50vh;  margin-left: 57px;}.item {  position: absolute;  height: 0;  width: 0;  border: 2px solid #eee;  border-radius: 50%;  -webkit-transform: rotateY(50deg);          transform: rotateY(50deg);  top: 50%;}.item:nth-of-type(1) {  -webkit-animation: rotation 26s infinite -2s linear;          animation: rotation 26s infinite -2s linear;}.item:nth-of-type(2) {  -webkit-animation: rotation 26s infinite -4s linear;          animation: rotation 26s infinite -4s linear;}.item:nth-of-type(3) {  -webkit-animation: rotation 26s infinite -6s linear;          animation: rotation 26s infinite -6s linear;}.item:nth-of-type(4) {  -webkit-animation: rotation 26s infinite -8s linear;          animation: rotation 26s infinite -8s linear;}.item:nth-of-type(5) {  -webkit-animation: rotation 26s infinite -10s linear;          animation: rotation 26s infinite -10s linear;}.item:nth-of-type(6) {  -webkit-animation: rotation 26s infinite -12s linear;          animation: rotation 26s infinite -12s linear;}.item:nth-of-type(7) {  -webkit-animation: rotation 26s infinite -14s linear;          animation: rotation 26s infinite -14s linear;}.item:nth-of-type(8) {  -webkit-animation: rotation 26s infinite -16s linear;          animation: rotation 26s infinite -16s linear;}.item:nth-of-type(9) {  -webkit-animation: rotation 26s infinite -18s linear;          animation: rotation 26s infinite -18s linear;}.item:nth-of-type(10) {  -webkit-animation: rotation 26s infinite -20s linear;          animation: rotation 26s infinite -20s linear;}.item:nth-of-type(11) {  -webkit-animation: rotation 26s infinite -22s linear;          animation: rotation 26s infinite -22s linear;}.item:nth-of-type(12) {  -webkit-animation: rotation 26s infinite -24s linear;          animation: rotation 26s infinite -24s linear;}.item:nth-of-type(13) {  -webkit-animation: rotation 26s infinite -26s linear;          animation: rotation 26s infinite -26s linear;}@-webkit-keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}@keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}

&lt;div id='wrapper'&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;  &lt;div class='item'&gt;&lt;/div&gt;&lt;/div&gt;/*CSS*/html {  background: #111;  overflow: hidden;}#wrapper {  height: 0;  width: 0;  position: relative;  left: 50%;  top: 50vh;  margin-left: 57px;}.item {  position: absolute;  height: 0;  width: 0;  border: 2px solid #eee;  border-radius: 50%;  -webkit-transform: rotateY(50deg);          transform: rotateY(50deg);  top: 50%;}.item:nth-of-type(1) {  -webkit-animation: rotation 26s infinite -2s linear;          animation: rotation 26s infinite -2s linear;}.item:nth-of-type(2) {  -webkit-animation: rotation 26s infinite -4s linear;          animation: rotation 26s infinite -4s linear;}.item:nth-of-type(3) {  -webkit-animation: rotation 26s infinite -6s linear;          animation: rotation 26s infinite -6s linear;}.item:nth-of-type(4) {  -webkit-animation: rotation 26s infinite -8s linear;          animation: rotation 26s infinite -8s linear;}.item:nth-of-type(5) {  -webkit-animation: rotation 26s infinite -10s linear;          animation: rotation 26s infinite -10s linear;}.item:nth-of-type(6) {  -webkit-animation: rotation 26s infinite -12s linear;          animation: rotation 26s infinite -12s linear;}.item:nth-of-type(7) {  -webkit-animation: rotation 26s infinite -14s linear;          animation: rotation 26s infinite -14s linear;}.item:nth-of-type(8) {  -webkit-animation: rotation 26s infinite -16s linear;          animation: rotation 26s infinite -16s linear;}.item:nth-of-type(9) {  -webkit-animation: rotation 26s infinite -18s linear;          animation: rotation 26s infinite -18s linear;}.item:nth-of-type(10) {  -webkit-animation: rotation 26s infinite -20s linear;          animation: rotation 26s infinite -20s linear;}.item:nth-of-type(11) {  -webkit-animation: rotation 26s infinite -22s linear;          animation: rotation 26s infinite -22s linear;}.item:nth-of-type(12) {  -webkit-animation: rotation 26s infinite -24s linear;          animation: rotation 26s infinite -24s linear;}.item:nth-of-type(13) {  -webkit-animation: rotation 26s infinite -26s linear;          animation: rotation 26s infinite -26s linear;}@-webkit-keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}@keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}

Copier/coller le code et découvrez vosu même l'animation

16/12/14 : Première version du script

Questions posées fréquemment

> Comment signaler un script ?

Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.

Demande de support

Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :