애니메이션 따라해보기 #2
아웃라인 애니메이션을 완성해요!
이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다.
크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다.
브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다.
이 글은 CSS에 대해 어느 정도 알고 계신 분들이 보실 거라는 가정하에 작성된 글입니다.
익숙하지 않으신 분들에겐 헷갈리거나 어려운 부분들이 있을 수 있습니다.
애니메이션 따라해보기 #2에서는 아웃라인 애니메이션을 마무리할 예정입니다.
흰색 선분들을 만들고 아웃라인 그룹만 살짝 건드리면 완성이에요 :)
아웃라인 애니메이션저번 글에서 아웃라인의 그룹의 등장과 주황색 선분 위주로 살펴봤다면,
이번엔 흰색 선분이 등장하는 모습과 아웃라인 그룹의 크기가 어떻게 변하는지 살펴보세요.
아웃라인 그룹첫 번째
아웃라인의 그룹이 크기가 작아지면서, 흰색 선분들이 등장합니다.
그룹의 크기가 작아지는 타이밍은 주황색 선분들의 애니메이션이 끝난 시점이에요.
두 번째
흰색 선분들은 주황색 선분의 모션이 끝나는 시점과 지점에서 등장합니다.
그리고 안쪽에서 밀려 나오는 것처럼 보이네요.
주의사항
애니메이션이 점점 밀도가 높아지면서 컨트롤하기 어려운 부분들이 생기려고 합니다.
그럴 때일수록 애니메이션이 어떤 타이밍에 등장하고, 끝나는지 정확히 파악해야 하며
서로 간섭하는 일이 없도록 각각 분리해서 작업하는 것이 좋습니다.
작업에 들어가기 전에 정리하고 시작해봅시다!
타임라인만들었던 애니메이션의 지속기간과 만들어야 할 애니메이션의 지속기간을 정리했어요.
여기서 중요한 점은 아웃라인 그룹의 애니메이션입니다.
animation-duration을 1s로 작업했던 것을 1.5s로 늘리면서,
애니메이션 값을 0%, 66%, 100%로 쪼개서 다시 입력해줘야 합니다.
아래 이미지에서 어떤 부분이 바뀌었는지 확인해보시면 이해가 빨리 될 거예요.
그리고 흰색 선분들은 새로 나오는 요소들이니 처음부터 작성해야 합니다!
수정 전원래 코드가 위 이미지처럼 되어있었을 거예요.
이제 아래 이미지처럼 바꿔봅시다!
수정 후수정하고 나면 애니메이션이 아래 GIF처럼 보일 거예요.
그런데 원하는 대로 안 나온 것 같죠?
애니메이션이 끝나고 기본 스타일 값으로 되돌아가버리네요.
마지막 키프레임을 계속 유지하고 싶은데 어떻게 해야 할까요?
이럴 때 사용하는 속성이 animation-fill-mode 입니다.
forwards 라는 값을 입력하면 애니메이션이 키프레임의 100%에 도달했을 때
마지막 키프레임을 유지하게 됩니다. 정말 간단하게 해결됐죠?
animation-fill-mode 속성에 대한 자세한 설명은 이곳에서 확인하세요.
아래 GIF에서 마지막 키프레임을 계속 유지하고 있는 모습을 볼 수 있습니다.
outline-wrapper 완성아웃라인 그룹(outline-wrapper)는 완성되었습니다 :)
혹시나 놓치신 부분이 있다면 위 이미지에 있는 코드를 확인하세요.
이제 흰색 선분들을 만들 예정인데, 가상선택자를 사용해서 만들 거예요.
제가 쓰고 있는 글은 CSS에 대해 어느 정도 알고 계신 분들이 보고 계실 거라는 가정 하에
작성하고 있기 때문에 가상 선택자에 대해 자세한 설명은 하지 않고 넘어갈게요.
혹시나 가상 선택자에 대해 모르시는 분들은 이곳에서 확인하세요.
흰색 선분들을 만들 때에도 그전에 썼던 클래스의 규칙을 비슷하게 사용할 거예요.
outline은 선분들의 공통적인 속성만 쓰려고 만들어둔 클래스
outline-x는 가로 선들의 길이, 굵기를 설정하기 위한 클래스
outline-y는 세로 선들의 길이, 굵기를 설정하기 위한 클래스
top, bottom, left, right는 각각의 위치와 세부 설정, 애니메이션을 컨트롤하기 위한 클래스
하지만 달라지는 부분은 애니메이션을 top, bottom, left, right에서 각각 추가한다는 점이에요.
왜 이렇게 작업하는지에 대해선 애니메이션을 추가할 때 자세히 설명하겠습니다.
CSS 코드.outline:after에는 공통적인 것들을 적어놨어요.
그 전과 다른 점은 content: '';가 추가된 것인데 가상선택자 특성상 입력한 내용이에요.
저부분을 지운다면 흰색 선분은 보이지 않을 겁니다.
.outline-x:after는 width가 길이이고, height가 두께.
.outline-y:after는 width가 두께이고, height가 길이입니다.
top:after, bottom:after, left:after, right:after에 선분들의 위치를 각각 설정해줬고,
흰색 선분들은 주황색 선분이 끝나는 지점에서 등장하기 때문에 transform-origin이 반대예요.
.outline-top { transform-origin: right center; }
.outline-top:after { transform-origin: left center; }
이제 기본적인 스타일링은 끝났네요! 아래 GIF처럼 나온다면 잘 따라 하고 계신 거예요.
이제 흰색 선분들이 등장하는 애니메이션을 만들어볼까요?
길이가 0에서 100%로 늘어나면서, 각자의 시작점 안쪽에서 밀려 나오면서 등장하면 되겠네요.
주의해야 할 점은 주황색 선분에서 했던 것처럼 x, y축으로 따로 만드는 것이 아닌
흰색 선분들 하나하나 개별적으로 코드를 입력해줘야 한다는 점이에요.
CSS 코드애니메이션 이름은 whiteline이라고 할 수도 있었지만 색보다 위치를 기준으로 inline이라고 정했어요.
.outline-top:after의 경우 왼쪽에서 밀려 나오기 때문에 0%에서 translateX(-3.5%),
.outline-bottom:after의 경우 오른쪽에서 밀려 나오기 때문에 0%에서 translateX(3.5%)입니다.
.outline-x, .outline-y에서 scale에 관련된 애니메이션을 주고
translate에 관련된 애니메이션은 각각 개별적으로 주면 되지 않을까? 하는
생각이 들지만 scale과 translate는 동시에 이루어져야하기 때문에
transform 속성에서 함께 기입해줘야 합니다. 위에 있는 이미지처럼요.
이제 애니메이션을 작업해봅시다.
CSS 코드공통된 값을 다루는 .outline:after에서 animation-duration과 delay를 주고,
나머지 각각의 클래스에서 animation-name을 입력해줍니다.
CSS 코드애니메이션 코드는 이런 식으로 작성하시면 됩니다.
의도한 위치로 밀어 놨다가 원래 위치로 되돌아오는 애니메이션이에요.
translateX의 경우 음수의 값은 왼쪽으로, 양수의 값은 오른쪽으로 이동합니다.
translateY의 경우 음수의 값은 위로, 양수의 값을 아래로 이동합니다.
위 코드를 입력하시면 아래 GIF처럼 보이실 거예요.
그런데 animation-delay가 적용된 동안 scale이 0으로 안보여야 할 것 같은데 보이네요.
아까 전에 animation-fill-mode를 사용했던 것처럼 이번에도 다시 한번 입력해줘야 합니다.
하지만 이번엔 forwards가 아닌 backwards라는 값을 입력해줘야 해요.
backwards는 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용하는 값입니다.
from(0%)에 작성했던 값을 적용시킨다고 보면 돼요.
animation-fill-mode를 작성해주니 의도한 대로 잘 나왔네요!
조금 더 자연스러운 애니메이션을 원하신다면, 지금까지 작성한 키프레임 코드 부분에
animation-timing-function을 사용해서 조절해보세요 :)
작성된 코드와 애니메이션을 보고 싶으신 분은 이곳에서 확인하세요.
다음 글에서는 텍스트와 이미지까지 완성시킬 예정이예요.
벨루가에서는 함께 일하실 분을 모시고 있어요.
같이 광복 이후, 한 세기 넘게 변화가 없던 15조 원에 달하는 주류� 시장을 바꿔나가봐요.
