• 회원가입
  • 로그인
  • 구글아이디로 로그인

[animation] CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애니메이션필모드속성, IE10)

animation-fill-mode 예제

 

<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-fill-mode: forwards;

}


/* 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>

 

결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
animation CSS - @keyframes 구문 - 애니메이션 코드 사용 선언 (= 애니사용 = @keyframes속성 …
animation CSS - animation 속성 ★ - 애니메이션 단축속성 (= animation속성 = 애니메이션속성, …
animation CSS - animation-delay 속성 - 애니지연시간 (= 작동지연시간 = 작동대기시간 = 작동준비시…
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
목록
찾아주셔서 감사합니다. Since 2012