[animation] CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/멈춤 선택 = 애니플레이스테이트속성, IE10)

animation-play-state 속성

 

<style> 

div {

  width: 300px;

  height: 100px;

  line-height:100px;

  text-align:center;

  color:white;

  background: red;

  position: relative;

  -webkit-animation: homzzang 3s;  /* Safari 4.0 - 8.0 */

  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */

  animation: homzzang 3s;

  animation-play-state: paused;

}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes homzzang {

  from {top: 0px;}

  to {top: 200px; background-color: blue;}

}

@keyframes homzzang {

  from {top: 0px;}

  to {top: 200px; background-color: blue;}

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기