CSS animation(애니메이션)

• 웹사이트에서 인터렉션한 효과 구현
• 사용자가 어떠한 액션을 취하지 않다러도 자기 스스로 움직이는 효과를 구현하고자 할 때 사용함
• CSS가 발전하면서 간단한 애니메이션은 JavaScript를 사용하지 않고도 구현이 가능해짐

1. transforms

• 선택한 오브젝트의 크기 확대 및 축소, 각도 회전, 위치 변경에 사용

● rotate( )

• 2차원적(평면적)인 회전 효과
• 양수(+ 값)를 적용하면 오른쪽으로 회전, 음수(- 값)를 적용하면 왼쪽으로 회전

● scale( , )

• 선택한 오브젝트의 크기를 비율로 키우거나 줄일 때 사용
• scale(2, 3); 이라면 크기를 x축(width)을 2배로 키우고, y축(height)을 3배로 키우게 됨
• 크기를 작게 하고 싶을 때는 0.5와 같이 소수점을 사용함

● skew( , )

• 3차원적인 회전 효과
• skew(10deg, 20deg); 이라면 x축을 10도 회전하고, y축을 20도 회전하게 됨
• 음수(- 값)를 적용하면 반대로 회전한다.

● translate( , )

• 선택한 오브젝트의 위치를 변경할 때 사용
• translate(100px, 200px); 이라면 x축 기준으로 오른쪽으로 100px, y축 기준으로 아래로 200px 이동시킴

※ 참고 : https://www.w3schools.com/css/

※ 주의점 : transform의 경우 브라우저 지원이 최근에 지원되어서, 지원되지 않는 버전에서는 freefix를 사용해야 함. 하지만 모든 하위버전이 가능하지는 않음
예) -ms-transform: rotate(10deg)

① -ms- : 마이크로소프트 익스플로러/엣지 브라우저
② -webkit- : 크롬, 사파리 브라우저
③ -moz- : 파이어폭스 브라우저
④ -o- : 오페라 브라우저

2. transition

• 선택한 오브젝트의 애니메이션이 변화하는 과정을 보여주고자 할 때 사용함

● transiton-property

• 변화를 주고자 하는 속성을 설정

● transition-duration

• 애니메이션이 진행되는 시간 설정

● transition-timing-function

• 애니메이션이 움직이는데 속도의 성격 지정 (예 - 일정하게, 점점 빠르게, 점점 느리게 등등)
• linear : 시작부터 끝까지 일정한 속도를 유지

● transition-delay

• 애니메이션의 시작을 지연시키는 설정
• :hover { }를 사용하여 애니메이션 결과값을 넣어줘야 함

※ transition은 –로 정의되어 있기에 여러 가지 속성값들을 하나의 속성으로 정리가 가능하다.
예) transition: width 2s linear 1s; (property → duration → timing-function → delay)

• 순서는 상관이 없지만, 숫자값을 하나만 사용하면 duration으로 인식함
• duration과 delay를 같이 사용할 때는 duration이 앞에 나와야 함

● transition은 메뉴버튼에 마우스를 올렸을 때, 자연스러운 색상변화를 주고자 할 때 많이 사용함

3. animation

• 오브젝트가 자연스럽게, 자동으로 움직이게 만들고자 할 때 사용하는 속성
• animation-name을 사용하여 사용할 애니메이션의 이름을 정해줌
• 효과들은 위의 transition에서 사용한 것과 동일한 효과 사용 가능(duration, timing-fuction, delay)

● animation-interation-count

• 애니메이션을 몇 번 작동시키는지 정하는 속성값
• infinite : 무한 반복

● animation-direction

• 애니메이션의 진행 방향을 정하는 속성값
• alternate는 왕복효과를 줌, 대신 가는 동작과 돌아오는 동작 각각 작동 횟수에 포함됨.
  예) animation-interation-count : 6;
  animation-direction: alternate; → 실행하면 왕복 3번 반복함

● @keyframes 애니메이션이름 { }

• 애니메이션을 사용하기 위해 따라와야 하는 코드
• animation-name을 통해 만들어진 이름으로 연동해야 함
• from { } 과 to { }를 사용하여 애니메이션의 시작과 끝을 설정해야 함
• from { } 과 to { }는 0% { }와 100% { } 로도 사용 가능함
• %로 설정하면 중간 지점도 설정 가능함(예- 50% { } )

■ 오브젝트가 움직이는 효과 구현(좌우로 움직이는 사자)

• 위에서 배운 내용을 사용하여 좌우로 움직이는 사자 애니메이션 만들기

※ animation도 여러 가지 속성값을 하나의 속성으로 정리 가능
※ animation도 동일한 freefix를 적용 가능, 대신 @keyframes와 내부에서 사용된 freefix를 필요로 하는 CSS속성에도 freefix를 적용해줘야 함
예) -webkit-animation: / @-webkit-keyframes spinLion { } / -webkit-transform:

※ 애니메이션 툴 사이트 – 복잡한 애니메이션 만들기에 도움이 됨
https://jeremyckahn.github.io/stylie/

작성 코드

Git 링크.css_animation

4. 애니메이션 실습

1) 마우스를 올렸을 때, 만들어진 메뉴의 배경색깔이 변경되는 기능

• transiton과 :hover를 사용

● opacity

• CSS에서 투명도에 영향을 주는 속성
• li { }에서 사용하면 배경과 글자 모두 투명화됨

※ 글자도 투명화되는 것을 막기 위해, opacity 대신 background-color: rgba();를 사용함

• rgba 색상 찾기 도움 사이트 : http://hex2rgba.devoth.com/
  예) 검은색(#000000) - rgba(0, 0, 0, 1) : 앞의 세 자리 숫자는 색깔의 좌표(RGB), 네 번째 자리는 투명도

2) Box가 움직이면서 형태와 색깔이 바뀌는 애니메이션

• position: relative;를 사용함으로서 top, left, bottom, right를 사용 가능
• 숫자 0은 px단위는 입력하지 않아도 적용이 됨 (예 : 0px = 0 )
  

■ 추가적인 animation 효과

● animation-play-state

• 애니메이션의 작동 여부를 선택
• running : 애니메이션 작동 ↔ puased : 애니메이션 작동 안함

● animation-fill-mode

• backwards : 예를 들어 <div>의 배경색과 animation @keyframes의 최초 배경색이 다른 경우, backwards를 사용하면 웹페이지에서 나오는 색이 @keyframes의 최초 배경색이 됨

■ 원형이 시간이 지남에 따라 크기가 바뀌고, 안의 네모난 박스의 크기도 변하는 애니메이션

● transform: scale() - 부모 영역에 scale()을 적용하면, 자식 영역도 같이 scale()을 적용받음

● border-width - border의 크기를 지정

● box-sizing: border-box - border의 변화를 box 안쪽에서만 변화되도록 함

3) 마리오에서 나오는 동전과 박스가 움직이는 애니메이션

• translate( )는 x축과 y축을 두 가지 다 입력해야 작동함 → y축만 움직일 경우 translateY( )를 사용함

● 동전에 회전하는 효과 추가

• @keyframes jumpCoin의 transform 안에 rotate( )를 적용하지만 변화는 없음
• 이런 경우 y축을 기준으로 회전하게 하기 위해 rotateY( )를 사용함
  ※ transform 안에 여러 속성을 사용할 때는 ,(쉼표)를 사용하지 않고 띄어쓰기를 사용함

4) 이미지 영역에 마우스를 올렸을 때, 이미지 확대시키기

● 가져온 이미지가 지정한 테두리 영역보다 큰 경우

• CSS에서 이미지의 width: 100% 로 설정하면 테두리 영역에 맞게 이미지 크기를 맞춤
• 이미지의 x축(width)값이 바뀌면, y축(height)값은 별도 지정값이 없으면 이미지 비율에 맞춰서 조절됨

● 이미지 하단 공백 제거하기(vertical-align: middle)

• CSS의 img { }에서 vertical-align: middle; 을 사용하여 공백을 지움
• 원래는 inline요소의 x축 정렬을 할 때 사용하였지만, img도 inline-block 요소를 가지고 있기에 공백 제거 가능
• 이미지에 디폴트 요소로 넣어주는 것을 추천

● 이미지 위에 글자 정보 올리기

• .image-info에서 position 값으로 absolute 넣기, width: 100%, box-sizing: border-box 넣기
• .hover-image애서 position 값으로 relative 넣기 → image-info의 width 값이 hover-image의 width 값을 기준으로 형성됨
• 부모 영역이 3차원적 특징을 가지고 자식 영역도 3차원적 특징을 가지면, 자식 영역의 위치 기준점은 부모 영역의 기준점으로 형성됨(left, bottom)

● 마우스를 올렸을 때, 이미지 확대하기

• .hover-image:hover img { }를 만들어 transform: scale()을 사용함
• 이미지 확대를 자연스럽게 하기 위해 .hover-image img { }에서 transiton을 사용함
• 이미지 확대가 테두리 영역을 넘겨서 확대되기에 hover-image { }에서 overflow: hidden을 사용함

● 이미지에 커서를 올렸을 때, 커서의 모양을 손가락으로 변경하기

• .hover-image { }에서 cursor: pointer를 입력하면, 이미지에 커서를 옮길 때 커서가 손가락으로 바뀜

● 마우스 커서를 올렸을 때, 하단의 이미지 정보가 아래쪽에서 위로 올라오면서 출현하는 기능 만들기

• 먼저 이미지 정보를 화면 밖에 위치시키기 위해, bottom 값을 이미지의 높이값보다 약간 큰 -(마이너스)값을 넣음
• 커서를 이미지에 올렸을 때 이미지 정보가 올라오도록 .hover-image:hover .image-info { } 에 bottom 값으로 0을 넣음
• 부드럽게 이미지 정보가 나타나게 하기 위해 .hover-image .image-info { }에 transition을 사용함

작성 코드

Git 링크.project-animation

어려웠던 점

animation의 여러가지 속성과 세부적인 효과들이 많아서, 이를 오류 없이 원하는대로 표현하고자 코드작성을 하는 것이 많이 어려웠습니다. 애니메이션을 위해 작성하는 코드량이 많아 오류도 많이 생겨서 당황스러운 경우가 많았습니다.

해결방법

인터넷이 애니메이션을 만드는데 도움을 주는 사이트들이 있어서, 이를 이용하여 너무 복잡하고 어려운 내용은 도움을 받았습니다.

학습 소감

앞서 강사님이 JavaScript가 담당하는 애니메이션의 간단한 부분을 css에서 가능하게 되었다고 하였는데, 막상 코드를 작성해보니 간단한 일이 아니었습니다. 하지만 애니메이션을 적용한 결과가 상당히 만족스러웠고, 차후 JavaScript에서 더욱 다양한 애니메이션을 배울 수 있다면 좋겠다는 생각이 들었습니다.