아이콘이 흔들리는 애니메이션 효과 ( css )

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

아이콘이 흔들리는 애니메이션 효과 ( css )

.icon-animated-vertical{display:inline-block;-moz-animation:vertical 1.5s 9999 ease 2s;-webkit-animation:vertical 1.5s 9999 ease 2s;-o-animation:vertical 1.5s 9999 ease 2s;-ms-animation:vertical 1.5s 9999 ease 2s;animation:vertical 1.5s 9999 ease 2s}@-moz-keyframes vertical{0%{-moz-transform:translate(0,-5px)}4%{-moz-transform:translate(0,5px)}8%{-moz-transform:translate(0,-5px)}12%{-moz-transform:translate(0,3px)}16%{-moz-transform:translate(0,-5px)}20%{-moz-transform:translate(0,5px)}22%{-moz-transform:translate(0,0)}}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-5px)}4%{-webkit-transform:translate(0,3px)}8%{-webkit-transform:translate(0,-5px)}12%{-webkit-transform:translate(0,5px)}16%{-webkit-transform:translate(0,-5px)}20%{-webkit-transform:translate(0,3px)}22%{-webkit-transform:translate(0,0)}}@-ms-keyframes vertical{0%{-ms-transform:translate(0,-5px)}4%{-ms-transform:translate(0,5px)}8%{-ms-transform:translate(0,-5px)}12%{-ms-transform:translate(0,5px)}16%{-ms-transform:translate(0,-5px)}20%{-ms-transform:translate(0,5px)}22%{-ms-transform:translate(0,0)}}@keyframes vertical{0%{transform:translate(0,-5px)}4%{transform:translate(0,5px)}8%{transform:translate(0,-5px)}12%{transform:translate(0,5px)}16%{transform:translate(0,-5px)}20%{transform:translate(0,5px)}22%{transform:translate(0,0)}}


아이콘이 흔들리는 효과를 볼 수 있어요.

저같은 경우 쪽지가 오면 아이콘이 흔들리게 해놔서 보기 쉽게 해봤네요


참고 사이트 |  http://www.nanumshop.net

0 Comments
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand