advofirst

by madvofirst

HTML

<script src="http://animejs.com/anime.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <style>


    </style>
  </head>

  <body>
    <div class="element-animation">
      <svg xmlns="http://www.w3.org/2000/svg" width="60" height="71" viewBox="0 0 60 71">
  <g fill="none" fill-rule="evenodd">
    <polygon fill="#717790" fill-rule="nonzero" points="30 70.53 0 53.147 0 18.382 30 1 60 18.382 60 53.147"/>
    <circle cx="48.5" cy="11.5" r="11.5" fill="#FF7C72" fill-rule="nonzero"/>
    <text fill="#FFF" font-family="ProximaNova-Semibold, Proxima Nova" font-size="12" font-weight="500">
      <tspan x="46" y="15">1</tspan>
    </text>
    <path fill="#FF7C72" fill-rule="nonzero" d="M23.3246039,42.6771571 L26.7470074,41.5363559 C26.9746609,41.4604714 27.2231924,41.4786429 27.4373872,41.5868332 C28.3711723,42.0584902 29.4031628,42.302909 30.4513004,42.3001784 C33.0075167,42.2991893 35.3438747,40.8543364 36.4883695,38.5643738 C36.9600266,37.6305887 37.2044454,36.5985982 37.2017178,35.5524589 L37.2030813,35.1496853 C37.0140597,31.7234691 34.2782919,28.9877013 30.9016531,28.8000463 L30.4493021,28.8000432 C29.4031628,28.7973156 28.3711723,29.0417344 27.433972,29.5151074 C25.1474247,30.6578863 23.7025717,32.9942443 23.7015796,35.5524589 C23.698852,36.5985982 23.9432708,37.6305887 24.4149278,38.5643738 C24.5231182,38.7785686 24.5412896,39.0271001 24.4654051,39.2547536 L23.3246039,42.6771571 Z M39.0017324,35.5489721 C39.0050081,36.8782051 38.6943583,38.1894323 38.0967776,39.3725026 C36.6492577,42.2687959 33.6898709,44.098943 30.4539952,44.1001929 C29.2524194,44.1033258 28.0655295,43.8499328 26.9721684,43.3586874 L22.1861728,44.9540193 C21.4825837,45.188549 20.813212,44.5191773 21.0477417,43.8155882 L22.6430732,39.0295936 C22.151828,37.9362495 21.898435,36.7495338 21.9015651,35.5497641 C21.902818,32.3118901 23.7329651,29.3525033 26.6258432,27.9066993 C27.8126866,27.3072219 29.1243493,26.996565 30.4516487,27.0000286 L30.9512305,27.0013952 C35.2935472,27.2409573...

CSS

.element-animation {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 64px;
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}

@keyframes animationFrames {
  0% {
    transform: scale(0.0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
  @-moz-keyframes animationFrames {
    0% {
      opacity: 0;
      color: blue;
    }
    100% {
      opacity: 1;
      color: red;
    }
  }
  @-webkit-keyframes animationFrames {
    0% {
      opacity: 0;
      color: blue;
    }
    100% {
      opacity: 1;
      color: red;
    }
  }
  @-o-keyframes animationFrames {
    0% {
      opacity: 0;
      color: blue;
    }
    100% {
      opacity: 1;
      color: red;
    }
  }
  @-ms-keyframes animationFrames {
    0% {
      opacity: 0;
      color: blue;
    }
    100% {
      opacity: 1;
      color: red;
    }
  }

JavaScript

anime({
  targets: '.element-animation',
  translateX: 250, // Animate all divs translateX property to 250px
  scale: 2, // Animate all divs scale to 2
  rotate: '1turn' // Animate all divs rotation to 1 turn
});