css - keyframe 애니메이션 정리

1. keyframe 애니메이션

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, -100%);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 100%);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeInleft {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

 

2. animation 사용하기

div {
width:100px;
height:100px;
background:blue;
animation: fadeIn 1s;
}