CSS 애니메이션 만들기

2022.08.16

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 11

     : 12 CSS 애니메이션 만들기

 

---

Review

 

오늘은 국비과정을 수료하는 동안 필라테스 학원에서 매니저로 일하기 위해 면접을 보고 왔다.

내 성격상 긴장하는 타입은 아닌데, 면접 대기 시간 동안 내 전공이 쓰일 만한 일을 단 한 번이라도

해보고 싶어서 욕심이 났는지 긴장되었다.

 

필라테스에 대한 질문을 하실까봐 조사해 갔는데 물어보지 않으셔서 오히려 다행이었다.

결과는 합격이고 다음주부터 일하기로 했다.

유연성이 꽝이어서 필라테스는 엄두도 못 내어 봤는데 한번 배워봐야 회원분들 상담을 할 수 있다고

배울 기회도 주신다고 하셔서 너무 좋다고 말씀드렸다.

 

앞으로 그곳에서 내가 하게 될 업무는 기존 매니저님께서 하시는 일을 보조하는 것이다.

인포 데스크에서 안내를 하고 회원 관리나 상담 같은 것은 인수인계가 끝나면 차근차근 알려주신다고

하셨다. 그 외에는 간단한 청소 업무를 하게 될 것 같다.

대학생 때 인바디 후 상담하는 실습을 했었는데 그런 업무도 해보고 싶다. 기회가 주어질지도 모르니

기억을 더듬어 다시 공부해봐야겠다.

 

다음주는 이사도 해야 하고 개강도 얼마 남지 않아 이것저것 준비할 것들이 많다.

개강 전에 블로그 업로드를 부지런히 하려 했는데 쉽지 않다.

 

개강 후부터는 국비과정을 들으며 공부하는 것도 포스팅하고 필라테스 학원에서 일하며 느끼는 점도

포스팅할 예정이다. 엄청 바빠지겠지만 대학생 때 일하며 공부했던 때를 떠올리며 다시 열심히

해보려고 한다.

 

 

---

 

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 11

 

: CSS에서 애니메이션이란 움직이는(변환하는) 효과를 의미한다.

예를 들어, CSS 애니메이션으로 요소의 스타일(글자 색, 이미지 위치 등)에 변화를 줄 수 있다.

CSS에서는 전환, 변형, 키프레임으로 애니메이션을 구현한다.

 

나중에 나만의 앱을 만드는 게 목표인데 거기에 움직임을 표현할 수 있는 요소를 배우다니

드디어 ! 기쁘다.

 

움직임을 만들어내는 과정이라 스크린샷으로 표현할 수가 없지만 공부한 것을 기록하려 한다.

 

 

---

 

 

<전환>

 

: 전환(transition)은 시간에 따른 상태를 지정하는 애니메이션이다.

전환의 대표적인 장점은 형태의 변형을 부드럽게 만들어준다는 점이다.

즉, 부드럽고 점진적인 애니메이션을 만들려면 움직임을 줄 때 전환을 사용해야 한다.

 

예를 들어, 11장에서 배운 hover 속성은 마우스를 갖다 대면 지정한 스타일값을 적용한다.

하지만 갑자기 바뀌는 바람에 부자연스러운 느낌이다.

부드러운 애니메이션이 필요한 순간에 전환을 이용하면 아주 좋을 것이다 !

 

배우는 순간 떠오르는 어플은 29CM였다.

내가 정말 좋아하는 Select Shop을 모아 놓은 유용한 어플이다.

편집도 정말 깔끔하고 이용자들로 하여금 흥미를 유발한다.

나중에 코딩을 많이 배워서 꼭 이용자들 눈을 즐겁게 하는 어플을 만들어보고 싶다 - !

 

전환에서는 2가지 필수 속성과 2가지 선택 속성이 있다.

-필수 속성 : 전환 속성값, 전환 시간

-선택 속성 : 전환 타이밍, 전환 지연

 

 

 

<전환 속성값>

 

: 전환 속성값(transition-property)은 전환될 속성을 지정한다.

전환 속성값에는 border-color와 같은 개별 속성 또는 all(전체 속성)이 있다.

전체를 지정하면 모든 속성에, 개별 속성을 지정하면 지정한 개별 속성에 애니메이션이 

적용된다.

 

element  {

     transition-property: border-color;

     transition-property: all;

}

 

 

 

<전환 시간>

 

: 전환 시간(transition-duration)은 전환을 시작해서 끝날 때까지의 시간을 지정한다.

초(s) 또는 밀리초(ms)로 지정한다.

기본값은 0초이며, 어떠한 애니메이션도 일어나지 않는다는 의미이다.

따라서 부드러운 애니메이션을 주려면 전환 시간을 반드시 입력해야 한다.

 

element  {

    transition-duration: 0.5s;

}

 

 

 

<전환 타이밍>

 

: 전환 타이밍(transition-timing-function)은 전환이 이루어지는 시점을 지정한다.

 

element  {

    transition-timing-function: ease-in;

}

전환 타이밍 속성값으로는 linear, ease-in, ease-out, ease-in-out, step-start, step-end 등이 

있는데, 기본값은 ease이다.

linear는 일정하게 전환하고, ease-in은 느려졌다 빨라진다.

모든 전환 타이밍을 외울 필요는 없고 다양한 타이밍이 필요할 때 찾아쓰면 된다.

 

* 'CSS animation transition-timing-function' 구글링

 

 

<전환 지연>

 

: 전환 지연(transition-delay)은 전환을 지연시켜 전환이 시작되는 시기를 지정한다.

기본적으로 전환은 조건이 충족되는 즉시 진행된다.

하지만 전환 지연을 사용하면 전환을 지연시킬 수 있다.

 

element  {

    transition-delay: 1s;

}

 

각 속성을 개별적으로 작성할 수 있지만 더 빠르고 깔끔한 코드를 위해 다음 절의 예제처럼 

필요한 속성들을 한 번에 쓰면 더 큰 효과를 볼 수 있다.

여기서 중요한 점은 필수 속성인 전환 속성값과 전환 시간을 입력하는 것이다.

 

 

 

<전환 예제 : 색이 변하는 사각형>

 

: 마우스를 사각형 위에 올려두면 색이 변하는 예제를 실행했다.

 

전환 예제

 

실행 결과 - 마우스를 올리기 전

 

실행 결과 - 마우스 올린 후

 

1. body 태그에 div를 생성한다.

2. div에 배경색, 가로, 세로 값을 줘 직사각형을 만든다.

3. 전환 필수값을 지정해 애니메이션을 만든다.

4. 애니메이션이 이워질 행동(hover)과 결과(background: green)를 작성한다.

 

마우스를 사각형 위에 올리면 초록색 배경으로 부드럽게 바뀐다.

시간 설정은 얼마나 해야 부드럽게 바뀌는지 아직 감이 오지 않는다. 

임의로 100ms, 300ms로 바꿔보니 훨씬 빠르게 바뀐다. 아마 부드럽게 하려면 좀더 긴 시간으로

설정해야 하는 것 같다.

 

 

 

<변형>

 

: 변형(transform) CSS 속성을 사용하면 외적인 형태의 변형을 줄 수 있다.

또한 전환과 함께 사용하면 부드러운 애니메이션까지 만들 수 있다.

회전(rotate), 기울이기(skew), 크기(scale), 이동(translate) 효과가 있다.

 

시작하기 전에 공간에 대한 이해가 필요하다.

모든 변형은 세 축(X, Y, Z)을 중심으로 이루어진다.

어느 방향으로 움직이는지 파악하면서 변형을 사용해보자.

 

- X축은 왼쪽에서 오른쪽으로 이동/변형되며 값은 오른쪽으로 증가한다.

- Y축은 아래에서 위쪽으로 이동/변형되며 값은 위쪽으로 증가한다,

- Z축은 화면에서 튀어 나와 더 큰 값이 화면에 더 가깝다.

 

 

 

 

 

 

<회전>

 

: 회전(rotate)은 지정된 각도(단위 deg)만큼 요소를 시계 방향 또는 반시계 방향으로 회전시킨다.

양수는 시계 방향으로, 음수는 시계 반대 방향으로 회전시킨다.

 

시계 방향으로 45도 회전하는 사각형을 만들어봤다.

 

 

회전하기 예제

 

실행 결과 - 마우스 올리기 전

 

실행 결과 - 마우스 올린 후

 

1. body 태그에 부모와 자식 관계인 div 2개를 생성한다.

2. div에 크기를 설정한다,

3. 부모 태그에는 테두리와 마진을, 자식 태그에는 채워진 정사각형을 생성한다.

4. 애니메이션이 이루어질 행동과 결과를 작성한다.

 

transform: rotate(45deg) 이런 식으로 설정하는 것 같다. 각도를 괄호 안에 넣는구나.

아직 뭐가 뭔지 모른 채로 무작정 따라하고 있다.

 

실행해보니 아주 귀여운 예제이다. 재미있다.

예를 들어, 왼쪽으로 45도 회전시키고 싶으면 rotate(-45deg); 라고 하면 되고,

X축으로 45도 회전하고 싶으면 rotateX(45deg); 이런 식으로 기입하면 된다.

 

 

 

 

<기울이기>

 

: 기울이기(skew)는 요소의 X축과 Y축을 제공된 값에 따라 기울인다.

주어진 각도가 양수이면 양의 방향으로, 음수이면 음의 방향으로 기울인다.

X와 Y값을 따로 사용할 수도, 모두 사용하여 기울일 수도 있다.

 

기울이기 예제

 

 

실행 결과 - 마우스 올리기 전

 

 

실행 결과 - 마우스 올린 후

 

 

회전 에제에서 transform을 skew로 변경하고 20도로 기울인다.

 

이 예제는 조금 헷갈린다. 이 외에도 사용할 수 있는 변수를 변경해서 실행해봤는데 말로

설명하기가 어렵다 ㅠㅠ

 

 

 

 

<크기>

 

: 크기(scale)는 요소 크기를 늘리거나 줄인다.

1보다 큰 숫자는 요소 크기를 늘리고 1보다 작으면 줄인다.

 

예를 들어, 2는 요소를 원래 크기의 두 배로 만들고 0.5는 절반 크기로 만든다.

요소의 크기는 X축과 Y축으로 조정할 수 있다.

만약 X 또는 Y값을 지정하지 않으면 기본적으로 두 축에 영향을 준다.

 

크기가 줄어드는 예제를 실행해보자.

 

 

크기 줄이기 예제

 

실행 결과 - 마우스 올리기 전

 

실행 결과 - 마우스 올린 후

 

기울이기 예제에서 transform 항목의 속성을 scale로 변경하고 원하는 속성값을 작성한다.

크기를 절반으로 줄이고자 0.5로 입력했다.

실행 결과 크기가 절반으로 줄어드는 것을 볼 수 있다.

 

예를 들어, Y축으로 더 늘리고 싶다면 scaleY(2);, 가로는 줄이고 세로는 늘리고 싶다면 

scale(0.5, 1.5); 이런 식으로 하면 작성하면 된다.

 

 

 

 

<이동>

 

: 이동(translate)은 요소를 상하좌우로 이동한다.

주어진 값이 양수이면 양의 방향으로, 음수이면 음의 방향으로 이동한다.

 

네모를 옆으로 이동하는 애니메이션을 구현해보자.

 

 

이동하기 예제

 

 

실행 결과 - 마우스 올리기 전

 

 

실행 결과 - 마우스 올린 후

 

크기 예제에서 transform 항목의 속성을 translate으로 변경하고 50px을 지정한다.

 

예를 들어, Y축으로 이동시키고 싶다면 translateY(50px); 로 적으면 되고, 

오른쪽과 아래로 둘다 이동시키고 싶다면 translate(12px, 50%) 이런 식으로도 가능하다.

 

 

 

 

<애니메이션 동시에 적용하기>

 

: 여러 효과를 동시에 적용할 수 있다.

회전하면서 작아지는 사각형을 예제로 만들어보자.

 

여러 변형 값 사용하기 예제

 

실행 결과 - 마우스 올리기 전

 

실행 결과 - 마우스 올린 후

 

적용하고 싶은 변형을 transform에 작성한다.

그러고 나서 회전(rotate), 크기 조절(scale), 이동 효과(translateX)를 지정한다.

 

코드 쓰는 것은 앞의 예제와 비슷해서 이해가 되는데, 아직 단위값을 얼마로 설정해야할지

이런 것에 대해 감이 잘 오지 않는다.

 

 

 

 

<애니메이션이 미치는 범위>

 

: 애니메이션은 지정한 요소의 형제 요소에 영향을 미치지 않는다.

앞에서 사용한 예제에 일부 값을 수정해 'hello world' 를 추가했다.

 

애니메이션 범위 예제

 

실행 결과 - 마우스 올리기 전

 

실행 결과 - 마우스 올린 후

 

1. body 태그에 p 태그를 추가한다.

2. transform에서 scale로 두 배 크기가 되도록 지정한다.

 

마우스를 올려 애니메이션을 적용하니 'hello world'가 가려진다.

즉, 애니메이션은 다른 태그에 영향을 미치지 않는다.

이것을 알아야 애니메이션과 함께 다른 요소를 같이 적용할 떄도 요소를 가리지 않고 적절한 간격으로

배치할 수가 있다.

 

 

 

 

<키프레임>

 

: 지금까지는 마우스를 올리면 애니메이션이 일어나는 속성을 배웠다.

마우스를 올리지 않고 애니메이션이 동작할 수는 없을까?

가능하다.

 

@keyframes 를 이용하면 애니메이션을 반복적으로 보여줄 수 있다.

 

키프레임 단위로 애니메이션을 지정하면 애니메이션이 일어나고 있는 중간에 CSS 스타일을

변경할 수 있다.

예를 들어, 크기가 커졌다 회전하고 다시 작아지는 등 내가 원하는 애니메이션으로 자유롭게

만들 수 있다.

 

키프레임을 주는 방법은 스타일의 변화가 발생하는 시기를 백분율(0~100%)로 지정하거나

from/to를 사용하여 지정한다.

0%와 form은 애니메이션의 시작이고 100%와 to는 애니메이션의 끝을 의미한다.

 

@keyframes animationname  {keyframes-selector   {css-styles;}}

                   애니메이션 이름      애니메이션 키프레임의 비율         적용하려는 스타일

 

 

또, 애니메이션은 개수 제한 없이 키프레임을 형성할 수 있다.

즉, 마음껏 키프레임을 만들 수 있다는 뜻이다.

 

 

 

 

<백분율(0~100%) 지정 방식>

 

: 백분율을 사용해 무한히 회전하는 사각형을 만드는 예제를 실행했다.

 

키프레임 0~100% 예제

 

실행 결과

 

1. body 태그에 div 태그를 생성한다.

2. div로 정사각형을 구현한다.

3. animation에 애니메이션 이름, 속도, 무한을 의미하는 infinite를 적용한다.

4. 0~100%를 이용하여 90도 단위로 회전하게 만든다.

 

상당히 복잡한 코드를 작성했는데, 마우스를 올리지 않아도 시계방향으로 무한히 회전하는

결과를 볼 수가 있었다. my move를 3s로 설정해서 그런지 꽤 빠른 속도로 회전하고 있다.

 

 

 

<from to 지정 방식>

 

: from, to를 사용해 무한히 회전하는 사각형을 만드는 예제를 실행해보았다.

 

from to 예제

 

실행 결과

 

바로 이전의 예제에서 @keyframes 를 from, to로 변경한 후 한 번에 270도씩 회전하도록 만든다.

 

deg 단위값으로 숫자 얼마를 줘야할지 아직 감이 잘 안오는데 이건 여러번 해봐야 감이 올 것 같다.

 

 

 

 

 

 

 

 

 

*이미지 출처

: pinterest 영화 '봄날은 간다'