Front-End Journal #01 — CSS 애니메이션의 첫 단계

9175 단어 devjournalanimationscsshtml
나는 항상 내 배움과 성장의 일지로서 기술 블로그를 갖고 싶었지만, 다른 사람들과 기술 콘텐츠를 공유할 자신감이 부족했기 때문에 지금까지 이 아이디어는 나에게 너무 멀었습니다. 보여줄 혁신적이거나 매력적이거나 흥미로운 것이 없습니다. 그러나 최근에 특히 Alexandre Cisneiros의 친구 블로그, 특히 this one 에서 영감을 받아 그냥 하기로 했습니다. 나는 이것에 대해 많이 읽었고 이제는 저널이나 블로그를 유지하는 것이 새로운 것을 자주 가르치는 것일 뿐만 아니라 프로그래머로서의 나의 진화를 추적하고 내 기술, 그래서 나는 다음에 무슨 일이 일어날 지 매우 흥분됩니다.

CSS 애니메이션



일관된 글쓰기 루틴을 유지하기 위한 나의 전략은 아기 단계를 밟는 것이므로 축척과 번역만 사용하여 간단한 CSS 애니메이션을 만들기 시작했습니다. e 아래의 전체 코드를 볼 수 있으며 더 나은 이해를 위해 몇 가지 개념을 설명하겠습니다.

기본 HTML:

<body>
  <div class="wrapper">
    <div class="big-circle">
      <div class="small-circle"></div>
    </div>
  </div>
</body>


CSS:

body {
  background: linear-gradient(90deg, rgba(122, 180,255,1) 0%, rgba(123,91,217,1) 100%);
}

.wrapper {
  margin-top: 200px;
}

.big-circle {
  animation: pulse 1.5s alternate infinite;
  margin: 0 auto;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255,255,.3);
}

.small-circle {
  position: relative;
  top: 50px;
  left: 50px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: white;
}

.small-circle:hover {
  animation: shake .1s alternate infinite;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes shake {
  0% {
    transform: translate(0%);
  }
  25%, 75% {
    transform: translateY(1%);
  }
  50%, 100% {
    transform: translateX(1%);
  }
}


그리고 아름다운 결과:



작동 방식



여기에서 초점을 맞추는 것은 이 두 가지 애니메이션이 어떻게 작동하는지 보여주는 것입니다. 즉, 나머지 HTML 및 CSS는 다른 블로그 게시물의 주제가 될 수 있습니다.

MDN에 따르면:
CSS 애니메이션을 사용하면 하나의 CSS 스타일 구성에서 다른 구성으로 애니메이션 전환이 가능합니다. 애니메이션은 두 가지 구성 요소, CSS 애니메이션을 설명하는 스타일, 애니메이션 스타일의 시작 및 종료 상태를 나타내는 키프레임 세트, 가능한 중간 웨이포인트로 구성됩니다.

이 두 가지 구성 요소를 살펴보겠습니다.

CSS 애니메이션을 설명하는 스타일



우선, 우리는 애니메이션의 스타일을 설정해야 하며 이것이 제가 이 두 줄에서 한 것입니다.
여기:

animation: pulse 1.5s alternate infinite;


그리고 여기:

animation: shake .1s alternate infinite;


애니메이션을 적용하고 싶은 요소를 선택했습니다. 이 경우에는 큰 원과 작은 원(호버링 상태)을 선택하고 속기 버전 애니메이션을 사용하여 애니메이션의 이름, 지속 시간, 방향 및 반복 횟수를 구성했습니다. .
그러나 아래에서 볼 수 있듯이 완전한 버전을 작성할 수 있습니다.

animation-name: pulse; // or shake
animation-duration: 1.5s; // or .1s
animation-direction: alternate;
animation-iteration-count: infinite;


이러한 이름은 자명하지만 애니메이션 방향에서 특히 살펴보겠습니다. 이 속성은 애니메이션이 앞으로 재생되어야 하는지, 뒤로 재생되어야 하는지 또는 시퀀스 재생 사이에서 앞뒤로 번갈아 재생되어야 하는지 여부를 설정합니다. 이 예에서는 애니메이션이 각 주기의 방향을 반대로 하고 첫 번째 반복이 앞으로 재생됨을 나타내는 대체를 사용했습니다. 더 확인하실 수 있습니다here .

키프레임



좋습니다. 하지만 애니메이션은 어디에 있습니까? 애니메이션 시퀀스를 따라 키프레임(또는 웨이포인트)에 대한 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어하는 ​​CSS@keyframes를 사용했습니다. 두 애니메이션에서 볼 수 있듯이 from/to 또는 백분율을 사용하여 애니메이션 과정을 따라 필요한 키프레임 수를 설정할 수 있습니다.

마지막으로 transform , scale , translate 및 translateX 과 함께 translateY 함수를 사용하여 전체 개체가 항상 확장 및 축소되는 최종 애니메이션을 빌드했습니다. 호버 상태에 있으면 흔들기 애니메이션이 활성화됩니다.

나는 당신이 그것을 즐겼기를 바랍니다! ;)
반응을 사용하여 처음부터 끈적끈적한 navbar
UE4에서 VS2019 만 설치하는 환경에서 VS2017을 찾을 수 없다는 오류를 해결하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage