본문 바로가기

광고

Design

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

Reference

CSS

NEWS

SITE

Coding


광고

Code View/Animation

[Animation] 애니메이션의 기본이 되는 통통 튀는 모션 만들기




원하는 모션을 키프레임을 통해 만들어 애니메이션을 지정하면
통통튀는 모션을 만들 수 있습니다.
플래시를 배울 때 기본이 되는 부분이죠^^

다음과 같이 keyframe을 설정합니다.
@keyframes bounce {
 0% { top: 0; }
     25% { top: -180px; }
  50% { top: 0; }
   100% { top: 0; }
}

통통튀는 효과는 단순하죠^^ 그림자도 똑같이 만들어주면 됩니다.

[미리보기]




See the Pen vfnEB by John Motyl Jr (@johnmotyljr) on CodePen.