에티테마

Css Animation 애니메이션 3 - 커졌다 작아졌다 하는 애니메이션

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,137회 작성일 19-07-15 17:21

본문

3ad3c6f8e42f7d7b12ca959388e561ed_1563181079_86.png


커졌다 작아졌다 하는 애니메이션을 구현해보았다.
뭔가 부자연스럽기도 하지만 키프레임의 % 조절을 통해서 좀더 부드럽게 표현할 수 있을것 같다.

<style> 

#ety {

width: 100px;

height: 50px;

background-color: green;

animation-name: demo;

animation-duration: 2s;

animation-iteration-count : infinite;

}

@keyframes demo {

/*

from {width:100px; height:50px;}

to {width:150px; height:80px;}

*/

0% { width:100px; height:50px; }

10% {width:120px; height:60px;}

20% {width:130px; height:70px;}

30% {width:140px; height:80px;}

40% {width:150px; height:90px;}

50% {width:160px; height:100px;}

60% {width:150px; height:90px;}

70% {width:140px; height:80px;}

80% {width:130px; height:70px;}

90% {width:120px; height:60px;}

10% {width:100px; height:50px;}


}

</style>

<div id="ety">ety.kr</div>

데모파일 : http://ety.kr/ex/css/css_animation_02.html

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 6건 1 페이지

카테고리

카테고리
 ETC
CSS
 JAVASCRIPT
 BOOTSTRAP
 HTML5
 VUEJS
 REACTJS
 NODEJS
 PHP
 SQL
 SERVER

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트