CSS Animation

Open In Editor Publish Your Code

<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 Animation

Recommended

Modern Glassmorphism Login Form in html, css

Gradient Login Form HTML CSS

CSS Loading Animation Example

HTML

CSS

JS

Recommended

Modern Glassmorphism Login Form in html, css

Gradient Login Form HTML CSS

CSS Loading Animation Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS