브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s: 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-function) animation-timing-function에 들어갈 수 있는 값은 다양한데, 대표적인것들만 살펴보면 아래와 같다. animation-timing-function 값
animation-timing-function 값에 따른 속도 차이 예시linear ease ease-in-out CSS 로 img 태그를 회전시키면서, 같은 작업을 반복하는 기능을 구현해봤습니다. 인터넷익스플로러 10부터 동작합니다. CSS를 풀어서 설명드리자면 img 테그에 hand 클래스에 대해서 에니메이션 총 동작시간은 2초 에니메이션 반복횟수 무제한 회전시 중심점은 이미지의 X축 왼쪽으로부터 25%위치와 Y축 위에서부터 100%위치 (바닥) 에니메이션 시작한지 0%지점에서 -10도, 50% 지점에서 25도, 다시 100%지점에서는 -10로 원상복귀 이를 무한반복 하면 손 이미지일 경우 안녕 ~ 하면서 흔드는 모습이에요 <html> <head> <style> img.hand { animation: target_image 2s; animation-iteration-count: infinite; transform-origin: 25% 100%; } @keyframes target_image { 0% { transform: rotate(-10deg); } 50% { transform: rotate(25deg) } 100% { transform: rotate(-10deg); } } </style> </head> <body> <div> <img src="hand.png" class="hand"> </div> </body> </html>
CSS를 이용하여 회전하는 로딩 애니메이션 만드는 방법에 대해 설명하려고 합니다. 설명 방법은 먼저 아래의 완성된 결과물을 보고 처음부터 코드 만드는 순서에 대해 설명하겠습니다. 완성된 결과물 See the Pen 회전하는 로딩 애니메이션 만들기 by solutiona80 (@solutiona80) on CodePen. 1. 로딩 영역의 동그라미 만들기 먼저 div를 만들고 count_motion클래스로 영역을 설정해줍니다. height: 178px; //높이 178px border: 10px solid transparent; /* border는 테두리 설정하는 css로 속성 값으로 border-width, border-style, border-color를 가진다. border-width는 두께 border-style는 테두리 형태(solid, dotted, groove, double, inset, outset, dashed, ridge 등이 있음)  border-color는 테두리 색 */ 예제에서 사용된 border: 10px solid transparent;의 테두리 설정값은 두께 10px에 slid 선 transparent는 투명하게입니다. /* 다시 border-color 재 설정 border-color: 위, 오른쪽, 아래, 왼쪽 순서. */ border-color: #00baff #fff #fff #fff; //위쪽 테두리만 약간 파란색이며 오른쪽, 아래쪽, 왼쪽은 흰색. transform-origin: 50% 50%; /* transform-origin은 회전 중심점 좌표를 설정함. transform-origin: 50% 50%; 회전 중심점을 가운데로 설정함. background-color: #313e51; /* 배경색을 #313e51으로 지정 */ 실행하면 아래처럼 동그라미가 그려집니다. 2. animation 효과 만들기 현재는 원형만 만든 상태로 설정한 중심점을 기준으로 회전하기 위해 회전하는 애니메이션을 만듭니다. 코드를 보시면 내용이 4개가 같습니다. 차이는 각 브라우저에서 돌아가게 하기 위해 따로 브라우저에 맞는 키프레임을 설정한 것입니다. @keyframes rotate-loading { 애니메이션 이름은 rotate-loading이며 코드 블럭 안에 0% 라는 말은 처음 시작할 때 transform을 이용한 rotate(0deg)로 오브젝트 각도는 0도로 설정하고 100%라는 말은 끝날 때 transform을 이용한 rotate(360deg)로 오브젝트 각도가 360도가 된다는 의미입니다. 애니메이션이 시작 시 정해진 시간 동안 각도를 0도에서 360도까지 변하게 됩니다. (아래에서 추가 설명) 3. object에 animation 효과 연결하기 count_motion class에 on을 추가하여 회전 애니메이션 연결 -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; /* 애니메이션 속성 : animation : 애니메이션 이름, 애니메이션 재생시간, 애니메이션 진행 속도 또는 가속 방식, 애니메이션 지연시간, 애니메이션 반복 횟수, 애니메이션 방향 rotate-loading -> 애니메이션 이름으로 위에서 키프레임 만든 애니메이션을 가리킴 1.5s -> 1.5초 동안 한번 재생으로 rotate-loading에서 설정한 0% ~ 100%를 1.5초 동안 재생. linear -> 애니메이션 가속 방식으로 증가폭이 일정한 방식 0s -> 딜레이 없이 바로 실행 infinite -> 애니메이션 반복 횟수로 숫자를 넣어서 원하는 만큼 반복 가능하며 infinite는 무한 반복을 뜻함. normal -> 애니메이션 재생 방향으로 normal 정방향, reverse 역방향, alternate 정방향과 역방향으로 한 번씩 번갈아 재생, alternate-reverse 역방향과 정방향으로 한 번씩 번갈아 재행 */ 4. GO 텍스트 넣기 텍스트를 넣을 div 추가 color: #ffffff; //폰트 흰색 맺음 css로 로딩 만드는 거 생각보다 어렵지 않습니다. 응용하면 로딩 대신 카운트를 할 수도 있고 클릭 이벤트를 넣어 시작화면으로도 넣을 수 있습니다. 문의 사항은 댓글로 남겨주세요. "포스팅이 도움이 되셨다면 좋아요와 댓글 그리고 커피 한잔의 여유~ 감사합니다." |
CSS 회전 애니메이션 반복 - CSS hoejeon aenimeisyeon banbog
관련 게시물
저작권 © 2024 ko.ketiadaan Inc.
