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

CSS OTP Page

HTML CSS and Javascript Hover Animation Effect

Restaurant Menu Website HTML CSS

HTML

CSS

JS

Recommended

CSS OTP Page

HTML CSS and Javascript Hover Animation Effect

Restaurant Menu Website HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS