당신의 첫 번째 CSS 애니메이션 (Your First CSS Animation)

이 글은 Twan MulderYour First CSS Animation글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

CSS 애니메이션을 시작합니다.

presentation
Photo by Pankaj Patel on Unsplash
당신의 첫 번째 웹사이트를 만들고 있다고 가정해보죠. HTML을 사용하여 기본 요소를 만들고 CSS를 사용하여 예쁜 스타일을 추가했습니다. 어쩌면 미디어 쿼리를 추가했을 수도 있습니다.
하지만 아직도 뭔가 빠진 게 있어요.
약간 예리한데요. 성격이 좀 그렇군요. 거기서 CSS 애니메이션을 시작합니다!

소개

CSS 애니메이션은 정말 예쁘네요. 몇 줄의 코드만 사용하여 요소를 튕기거나 이동, 회전 또는 심지어 사라지게 할 수 있습니다.
모든 애니메이션은 2단계로 구성되어 있습니다.
첫 번째 단계는 "keyframes"라고 하는 애니메이션을 만드는 것입니다.
두 번째는 이 애니메이션을 요소에 추가하고 해당 애니메이션을 "properties"로 설정하는 것입니다.

따라 하기

이 글을 따라가기 위해 여러분은 자신만의 텍스트 편집기를 열 수 있습니다. 하지만 저는 또한 여러분이 직접 코드를 만지지 않고도 따라갈 수 있도록 몇 개의 샌드박스를 만들었습니다.
다음과 같습니다.
  • 키프레임을 사용하여 애니메이션을 만듭니다.
  • 요소에 애니메이션을 추가합니다.
그것만 있으면 됩니다.

키프레임을 사용하여 애니메이션을 만듭니다.

그렇다면 키프레임은 정확히 무엇일까요? 위키피디아는 이를 다음과 같이 정의합니다.
애니메이션 및 필름 제작의 키프레임(keyframe)은 매끄러운 전환의 시작점과 끝점을 정의하는 도면입니다. (Wikipedia)
매끄러운 전환
CSS의 키프레임은 두 CSS 속성 간에 원활하게 전환됩니다. 물체 속에서 희미해지고 싶다고 가정해보죠. 초기 불투명도 및 불투명도의 새 값을 정의하면 CSS가 두 점 사이에 이러한 부드러운 전환을 마술처럼 생성합니다.
CSS 파일에서 어떻게 보일지 알아보겠습니다.
먼저 키프레임은 새 애니메이션의 이름으로 호출됩니다.
@keyframes fadeIn { }
좋습니다! 다음으로, 이 애니메이션의 시작점과 끝점을 정의하겠습니다. 이 작업은 백분율(%)을 사용하거나 "from" 및 "to"을 사용하여 수행할 수 있습니다. 이렇게 보일 수 있습니다.
@keyframes fadeIn { 0% { } 100% { } }
또는 :
@keyframes fadeIn { from { } to { } }
이러한 브래킷 안에는 CSS 속성이 정의되어 있습니다. 만약 우리가 우리의 요소에서 희미해지기를 원한다면, 우리는 0에서 그것의 불투명성으로 시작해서 1로 설정합니다. 그러면 우리의 요소가 보일 것입니다.
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
그리고 그것이 첫 번째 단계를 위한 전부입니다! 이제 첫 애니메이션(페이드인-fadeIn이라고 함)을 제작하고, 0 불투명도에서 1로 변경하면 어떻게 되는지 정의했습니다.
이제 이 애니메이션을 이미 존재하는 요소에 추가하는 일만 남았습니다.

요소에 애니메이션을 추가합니다.

자, 이제 첫 애니메이션을 만들었으니까, 한 요소에 추가해보죠! 이건 당신이 원하는 모든 것이 될 수 있어요. 텍스트, 배경 이미지 또는 전체 웹 페이지를 생각해 보세요.
저는 이미 한 줄의 텍스트와 별이 총총한 배경을 만들었고, 이 배경은 우리가 애니메이션으로 만들 것입니다.
다음과 같습니다.
그러면 이것은 어떻게 생겼을까요?
가장 간단한 형태는 다음과 같습니다.
.text { animation: 5s fadein; }
텍스트에 애니메이션을 추가한 다음 시간이 얼마나 걸릴지 정의합니다.
그게 당신이 필요한 전부일 수도 있어요!
그렇지만
이 애니메이션에 다음과 같은 다른 속성을 추가할 수도 있습니다.
지연(A delay)은 다음과 같습니다.
.text { animation: 5s fadein 2s; }
우리는 그것의 완화를 바꿀 수 있습니다.
.text { animation: 5s fadein 2s ease-in; }
또는 "문자 수"(애니메이션이 재생해야 하는 횟수)를 설정할 수도 있습니다.
.text { animation: 5s fadein 2s ease-in infinite; }
CSS 애니메이션 속성의 전체 목록을 보려면 MDN Web Docs를 적극 권장합니다.
그래서 텍스트와 별에 우리의 "fadeIn" 애니메이션을 추가한 후에, 이것이 결과입니다!
(샌드박스 내부의 새로 고침 버튼을 누릅니다.)
꽤 예쁘지만, 가장 중요한 것은 아주 간단해요!

닫습니다

작은 페이지에 조금 더 멋을 더하기 위해, 저는 그것을 회전시키는 애니메이션을 배경에 추가했습니다. 다음은 제가 사용한 키프레임입니다.
@keyframes rotate{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
여기에 애니메이션을 배경에 추가하는 방법이 있습니다.
.background { animation-name: rotate; animation-iteration-count: infinite; animation-timing-function: linear; }
이 애니메이션에 대한 기간(duration)을 추가하지 않은 것에 주목하세요!
이것은 우리가 다른 기간(duration)으로 애니메이션을 만들고자 하는 다른 요소들의 배경이 존재하기 때문입니다. 이것이 바로 다음과 같습니다.
.background > *:nth-child(1) { animation-duration: 16s; }.background > *:nth-child(2) { animation-duration: 20s; }...
모든 것을 종합해 보면, 이것이 최종 결과입니다.
(샌드박스 내부의 새로 고침 버튼을 누릅니다.)

결론부터 말씀드리면

되돌아보면, 키프레임을 사용하여 애니메이션을 만들었고, 그 후에 CSS "애니메이션" 속성을 사용하여 웹 페이지의 요소에 추가할 수 있습니다. 이 속성은 애니메이션의 이름과 지속 시간이 적어도 필요하지만 더 많은 항목을 추가할 수 있습니다. 지연, 반복 횟수, 완화가 가장 일반적인 방법입니다.
얼마나 많이 배웠는지 보세요!
읽어주셔서 감사합니다!

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz