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

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

<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