Animation CSS

1,785 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 November 2025

Formulaire de connexion/inscription HTML CSS Authentification biométrique

19 November 2025

Modèle de tableau de bord d'administration HTML avec CSS et graphiques

30 October 2025

Barre de navigation CSS pour les réseaux sociaux

HTML

<HTML>

<HEAD>
  <style>
    #animation-div {
      width: 80px;
      height: 50px;
      background: #B901A9;
      color: #ffffff;
      position: relative;
      font-weight: bold;
      font-size: 20px;
      padding: 10px;
      text-align: center;
      animation: animation-div 5s 1;
      -moz-animation: animation-div 5s 1;
      -webkit-animation: animation-div 5s 1;
      -o-animation: animation-div 5s 1;
      border-radius: 6px;
      -webkit-border-radius: 6px;
    }

@keyframes animation-div {
      0% {
        transform: rotate(0deg);
        left: 0px;
      }

25% {
        transform: rotate(20deg);
        left: 0px;
      }

50% {
        transform: rotate(0deg);
        left: 500px;
      }

55% {
        transform: rotate(0deg);
        left: 500px;
      }

70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
      }

100% {
        transform: rotate(-360deg);
        left: 0px;
      }
    }

@-webkit-keyframes animation-div {
      0% {
        -webkit-transform: rotate(0deg);
        left: 0px;
      }

25% {
        -webkit-transform: rotate(20deg);
        left: 0px;
      }

50% {
        -webkit-transform: rotate(0deg);
        left: 500px;
      }

55% {
        -webkit-transform: rotate(360deg);
        left: 500px;
      }

70% {
        -webkit-transform: rotate(0deg);
        left: 500px;
        background: #00E2FF;
      }

100% {
        -webkit-transform: rotate(-360deg);
        left: 0px;
      }
    }

@-moz-keyframes animation-div {
      0% {
        -moz-transform: rotate(0deg);
        left: 0px;
      }

25% {
        -moz-transform: rotate(20deg);
        left: 0px;
      }

50% {
        -moz-transform: rotate(0deg);
        left: 500px;
      }

55% {
        -moz-transform: rotate(0deg);
        left: 500px;
      }

70% {
        -moz-transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
      }

100% {
        -moz-transform: rotate(-360deg);
        left: 0px;
      }
    }

@-o-keyframes animation-div {
      0% {
        transform: rotate(0deg);
        left: 0px;
      }

25% {
        transform: rotate(20deg);
        left: 0px;
      }

50% {
        transform: rotate(0deg);
        left: 500px;
      }

55% {
        transform: rotate(0deg);
        left: 500px;
      }

70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
      }

100% {
        transform: rotate(-360deg);
        left: 0px;
      }
    }
  </style>
</HEAD>

<BODY>
  <div id="animation-div">CSS3<br><span style="font-size:15px;">Animation</span></div>

</BODY>

</HTML>

CSS