2021-01-24 Animation/Transition Playground

by Ttt Yyy

HTML

<html>
<header></header>
<body>
<div id="animate-container" class="container"></div>
<div id="transition-container" class="container"></div>
</body>
</html>

CSS

.container {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

#animate-container {
  /* animation: backgroundChange 1s ease-in 1; */
  animation-name: change;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes change {
  from{
    background: red;
    transform: translateX(0);
  }
  
  to {
    background: #ffffff;
    transform: translateX(100px);
  }
}

#transition-container {
  /* transition could have multiple */
  transition: background 2s, transform 2s;
  background: red;
  transform: translateX(0);
}

#transition-container:hover {
  background: #ffffff;
  transform: translateX(100px);
}