본문 바로가기

web's

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기
패럴럭스 배우기

CSS

NEWS

SITE

Coding

광고

keyframe

[Loading] keyframe과 transform을 이용한 로딩 애니메이션 기존의 로딩과 모션과는 많이 다르죠^^이런 로딩 모션도 좋네요^^모션은 keyframe으로 잡아주고요세세한 부분은 transform과 anmation으로 설정해 주었습니다. Loading... 9개의 모션 단계를 구성하여 거기에 맞게 움직임을 설정하였네요^^ animation: rotate1 5s; animation-iteration-count:infinite; animation-direction:alternate; transform-origin: 50% 50%; 기본 구성은 이렇네요^^ See the Pen Loading Animation by Yash Bhardwaj (@yashbhardwaj) on CodePen.