친절한효자손 취미생활

지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다.


transition : property duration timeingfunction;


그리고 각 요소에 대한 설명은 아래와 같습니다.


property : 애니메이션을 적용할 태그 요소를 지정

duration : 애니메이션 재생 시간

timeingfunction : 애니메이션 속도 옵션


그래서 실질적으로 이 부분에 대해서는 이론만으로는 이해하기가 어렵기 때문에 아래의 코드를 먼저 구성해봤습니다.


    
DIV1
DIV2
DIV3
DIV4
DIV5
DIV6

DIV7
DIV8
DIV9
DIV10
DIV11
DIV12

각 div는 마우스를 올렸을 경우에 애니메이션 효과를 다양하게 보여지게 하기 위해서 여러개를 만든 것 입니다. 그리고 CSS 스타일 부분은 다음과 같습니다.


@charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'); /*RESET*/ * { margin: 0; padding: 0; } body { font: 17px 'Nanum Gothic', sans-serif; } a { text-decoration: none; color: #404040; } li { list-style: none; } hr { margin: 20px 0; visibility: hidden; } /*BODY*/ div { width: 100px; height: 100px; margin: 20px; background: yellow; } div:hover { width: 200px; font-size: 25px; color: #fff; letter-spacing: 20px; background: red; } .ex01 { transition: all 1s linear; /*등속운동*/ } .ex02 { transition: all 1s ease; /*느리게 시작했다가 빨라지고 다시 느려짐 - 기본값*/ } .ex03 { transition: all 1s ease-in; /*점점 빨라짐*/ } .ex04 { transition: all 1s ease-out; /*점점 느려짐*/ } .ex05 { transition: all 1s ease-in-out; /*처음과 끝이 느림 - ease와 거의 비슷함*/ } .ex06 { transition: color 0.3s linear, background 3s ease, width 0.5s ease-out, font-size 2s ease-in, letter-spacing 1s ease-in-out; } .ex07 { transition: all 2s cubic-bezier(0,0,0,1); } .ex08 { transition: all 2s cubic-bezier(0,0,1,0); } .ex09 { transition: all 2s cubic-bezier(0,1,0,0); } .ex10 { transition: all 2s cubic-bezier(1,0,0,0); } .ex11 { transition: all 2s cubic-bezier(0,0,1,1); }

보시면 timeingfunction 부분에 속도의 변화를 주기 위한 여러 요소가 들어갑니다. 각 부분에 대해서는 주석을 달아놨으니 참고해 보시면 될 것 같습니다. 가장 변화가 두드러지게 나타나는 요소는 cubic-bezier 입니다.


cubic-bezier 는 총 네개의 값이 들어갑니다. 각 부분에 대해서는 저도 정확히는 알 수 없지만, 0에서 1 사이의 값을 사용하는게 보통입니다. 물론 1 이상의 값을 입력할 수 있는데, 그런 경우는 움직임이 상당히 이상해지므로 통상적으로 0~1 까지의 소수점을 활용한 값을 입력하면 됩니다. 가령, linear의 속도에 대한 경우는 값이 (0,0,1,1) 또는 (0.25,0.25,0.75,0.75) 입니다. 이것을 직관적으로 살펴볼 수 있는 사이트가 있는데, 아래를 참고해주시면 됩니다.


https://matthewlein.com/tools/ceaser


이렇게 해서 완성된 transition 요소에 대한 애니메이션을 살펴보도록 하겠습니다. 아래에 미리 확인하실 수 있도록 코드펜을 활용해서 올려놨습니다. 하나하나의 div에 마우스를 올려보세요. 애니메이션이 실행됩니다.



See the Pen transition options by rgy0409 (@rgy0409) on CodePen.


그렇습니다. 이렇게 CSS에서도 transition을 활용해서 애니메이션 효과를 만들어 줄 수 있습니다. 그냥 이런저런게 다 햇갈린다 싶으시면 transition: all 숫자s; 로 넣어주시면 됩니다. 원래 기본값이 최고입니다. 끝.



"친절한효자손 취미생활" 을 검색!


알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.