CSS 키프레임

CSS를 사용하면 애니메이션을 쉽게 만들 수 있습니다. 그리고 재미있는 부분은 타사 프레임워크나 플러그인이 필요하지 않다는 것입니다.

@keyframes CSS 규칙은 이러한 애니메이션을 빌드하는 데 필요한 도구입니다.

@keyframes 구문

@keyframes는 CSS 규칙입니다. At-rules는 CSS가 어떻게 작동해야 하는지 알려줍니다. @viewport, @support와 같은 다른 많은 규칙이 있습니다.

다음 구문으로 @keyframes 규칙을 정의합니다.

@keyframes <name> {
    from {
    /* start details here */
    }

    to {
    /* end details here */
    }
}

키워드 대신 백분율을 지정하여 보다 세련된 애니메이션 선언을 얻을 수 있습니다.

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

참고 :새로 생성된 키프레임을 사용하려면 animation-name 값으로 추가해야 합니다. 재산. animation-duration도 설정할 수 있습니다. 선언된 @keyframes 애니메이션의 지속 시간을 지정합니다.

매직볼이 나타났다가 사라지도록 합시다. 혹시라도 길을 잃으시면 동봉된 Codepen을 참고해주세요.

가장 먼저 해야 할 일은 애니메이션을 정의하는 것입니다. 이름을 매직볼로 지정하겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

기본적으로 배경색을 연두색에서 청자색으로 변경합니다. 이것은 모든 요소에 적용할 수 있지만 계속해서 서클에 적용하겠습니다.

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

잊지 마세요 키프레임 애니메이션이 작동하려면 animation-name 값으로 추가해야 합니다. 속성을 지정하고 animation-duration을 사용하여 애니메이션 지속 시간을 초 단위로 설정합니다. .

이 애니메이션으로 이제 우리의 공이 나타났다가 사라집니다!💥

다른 애니메이션을 만들어 보겠습니다. 이번에는 사각형에 애니메이션 효과를 주어 움직이는 효과를 만들어 보겠습니다. 애니메이션의 이름을 moveIn으로 지정하고 이 경우 백분율을 사용합니다.

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

불투명도는 거의 우리의 투명도입니다. 따라서 이 새로 생성된 애니메이션을 사각형에 적용할 수 있습니다.

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

아주 적은 양으로 얼마나 훌륭한 효과를 냈는지 알 수 있습니다!

애니메이션에 대한 CSS 문서를 읽으면 애니메이션에 대한 여정을 계속할 수 있습니다. 또한 지속 시간을 사용하여 애니메이션을 개선하는 한 가지 방법만 언급했습니다. 볼 가치가 있는 애니메이션 하위 속성이 더 많이 있습니다!

마지막으로 모든 속성에 애니메이션을 적용할 수 있는 것은 아닙니다. 애니메이션 속성의 전체 목록을 살펴보십시오.