Animation CSS

1585 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 May 2025

Formulaire de connexion dégradé HTML CSS

26 February 2026

Effet verre liquide (code HTML CSS)

17 December 2025

Barre de navigation inférieure avec icônes et CSS Tailwind

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>

Recommandé

Formulaire de connexion dégradé HTML CSS

Effet verre liquide (code HTML CSS)

Barre de navigation inférieure avec icônes et CSS Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS