CSS-animointi

CSS

.rotate {
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
   animation-name: rotate;
   position: absolute;
   top: 2em;
   left: 2em;
   font-size: 2em;
}

@keyframes rotate {
  from {
         transform: rotate(0deg);
  }
  to {
         transform: rotate(360deg);
  }
}
.scale {
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in;
   animation-name: scale;
   position: absolute;
   top: 2em;
   left: 6em;
   font-size: 2em;
}

@keyframes scale {
  from {
         transform: scale(0.5);
  }
  to {
         transform: scale(5);
  }
}
.translate {
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-name: translate;
   animation-timing-function: cubic-bezier(0.2, 0.5, 1.1, 0.2);
   position: absolute;
   top: 0em;
   right: 0em;
   font-size: 2em;
}

@keyframes translate {
  from {
         transform: translate(0,0);
  }
  50% {
        transform: translate(-50vw, 10vh );
  }
  to {
        transform: translate(-100vw, 0);
  }
}

CSS

HTML

Javascript

Konsoli