Hébergeur de fichiers indépendant

countdown timer test0 72h.css

À propos

Type de fichier
Fichier CSS de 4 Ko (text/plain)
Confidentialité
Fichier public, envoyé le 5 octobre 2017 à 23:36, depuis l'adresse IP 78.247.x.x (France)
Sécurité
Ne contient aucun Virus ou Malware connus - Dernière vérification: 3 jours
Statistiques
La présente page de téléchargement a été vue 178 fois depuis l'envoi du fichier
Page de téléchargement

Aperçu du fichier


.numéro {
  display: inline-block;
  font-size: 50px;
  color: #797b96;
  height: 50px;
  line-height: 1;
}

.time-part-boxetimer {
  display: inline-block;
  margin-right: 50px;
  position: relative;
}

.time-part {
  width: 50px;
  text-align: center;
  height: 50px;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
}
.time-part .numéro-boxetimer {
  animation-timing-function: cubic-bezier(1, 0, 1, 1);
}
.time-part.heures.dizaines .numéro-boxetimer {
  animation-name: heures-dizaines;
  animation-duration: 216000s;
  animation-iteration-count: 1;
}
.time-part.heures.unités .numéro-boxetimer {
  animation-name: heures-unités;
  animation-duration: 36000s;
 animation-iteration-count: 7;
}
.time-part.minutes.dizaines .numéro-boxetimer {
  animation-name: minutes-dizaines;
  animation-duration: 3600s;
  animation-iteration-count: 43;
}
.time-part.minutes.unités .numéro-boxetimer {
  animation-name: minutes-unités;
  animation-duration: 600s;
  animation-iteration-count: 432;
}
.time-part.secondes.dizaines .numéro-boxetimer {
  animation-name: secondes-dizaines;
  animation-duration: 60s;
  animation-iteration-count: 2592;
}
.time-part.secondes.unités .numéro-boxetimer {
  animation-name: secondes-unités;
  animation-duration: 10s;
  animation-iteration-count: 25920;
}


@keyframes heures-dizaines {
  0% {
    transform: translateY(-50px);
  }
  12.5% {
    transform: translateY(-100px);
  }
  25% {
    transform: translateY(-150px);
  }
  37.5% {
    transform: translateY(-200px);
  }
  50% {
    transform: translateY(-250px);
  }
  62.5% {
    transform: translateY(-300px);
  }
  75% {
    transform: translateY(-350px);
  }
  87.5% {
    transform: translateY(-400px);
  }
  100% {
    transform: translateY(-450px);
  }
}
@keyframes heures-unités {
  0% {
    transform: translateY(-50px);
  }
  10% {
    transform: translateY(-100px);
  }
  20% {
    transform: translateY(-150px);
  }
  30% {
    transform: translateY(-200px);
  }
  40% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(-300px);
  }
  60% {
    transform: translateY(-350px);
  }
  70% {
    transform: translateY(-400px);
  }
  80% {
    transform: translateY(-450px);
  }
  90% {
    transform: translateY(-500px);
  }
}

@keyframes minutes-dizaines {
  0% {
    transform: translateY(-50px);
  }
  16.66667% {
    transform: translateY(-100px);
  }
  33.33333% {
    transform: translateY(-150px);
  }
  50% {
    transform: translateY(-200px);
  }
  66.66667% {
    transform: translateY(-250px);
  }
  83.33333% {
    transform: translateY(-300px);
  }
}
@keyframes minutes-unités {
  0% {
    transform: translateY(-50px);
  }
  10% {
    transform: translateY(-100px);
  }
  20% {
    transform: translateY(-150px);
  }
  30% {
    transform: translateY(-200px);
  }
  40% {
    transform: translateY(-250px);
  }
  50% {
    transform: translateY(-300px);
  }
  60% {
    transform: translateY(-350px);
  }
  70% {
    transform: translateY(-400px);
  }
  80% {
    transform: translateY(-450px);
  }
  90% {
    transform: translateY(-500px);
  }
}
@keyframes secondes-dizaines {
  0% {
    transform: translateY(-50px);
  }
  16.66667% {
    transform: translateY(-100px);
  }
  33.33333% {
    transform: translateY(-150px);
  }
  50% {
    transform: translateY(-200px);
  }
  66.66667% {
    transform: translateY(-250px);
  }
  83.33333% {
    transform: translateY(-300px);
  }
}
@keyframes secondes-unités {
  0% {
    transform: translateY(-50px);
  }
  10% {
    transform: translateY(-100px);
  }
  20% {
    transform: translateY(-150px);
  }
  30% {
    transform: translateY(-200px);
  }
  40% {
    transform: translateY(-250px);
  }
  50% {
    transform: translateY(-300px);
  }
  60% {
    transform: translateY(-350px);
  }
  70% {
    transform: translateY(-400px);
  }
  80% {
    transform: translateY(-450px);
  }
  90% {
    transform: translateY(-500px);
  }
}


Partager le fichier


Télécharger countdown_timer_test0_72h.css


Télécharger countdown_timer_test0_72h.css