アニメーションのCSS

animation.css

.transform {
  /* 原点 */
  transform-origin: 50% 50% 0 | left top | 10% 20% 30%;
  tranform: rotate(45deg);
  transform: scale(2);
  transform: skew(45deg);
  transform: translate(10px, 10px);
}
.transition {
  /* property duration timing-function delay */
  transition: all .2s ease-out .2s;
  transition-property: all | opacity;
  transition-duration: 0s | .5s | 500ms;
  transition-timing-function: ease | ease-out | linear | cubic-bezier(0.1, 0.7, 1.0, 0.1);
  transition-delay: 0s | .5s | 500ms;
}
.animation {
  /* name duration timing delay iteration-count direction fill-mode play-state */
  animation: name 1s ease 0s infinite normal none running;
  animation-name: none | name;
  animation-duration: 0s | .5s | 500ms;
  animation-timing-function: ease | ease-out | linear | cubic-bezier(0.1, 0.7, 1.0, 0.1);
  animation-delay: 0s | .5s | 500ms;
  animation-iteration-count: 1 | 3 | infinite;
  animation-direction: normal | alternate(往復) | reverse(逆);
  animation-fill-mode: none | forwards(100%) | backwards(0%);
  animation-play-state: running | paused;
}
@keyframes name {
  0% { opacity: 0; }
  100% { opacity: 1; }
}