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

Infinite Orbit Animation with CSS Trigonometry

CSS Toggle Switch HTML Code

Neumorphic Profile Card HTML CSS Template

HTML

CSS

JS

Recommended

Infinite Orbit Animation with CSS Trigonometry

CSS Toggle Switch HTML Code

Neumorphic Profile Card HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS