CSS

[animation] CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경, IE10)

animation-timing-function 예제

 

<style> 

div {

  width: 300px;

  height: 100px;

  line-height:100px;

  text-align:center;

  color:white;

  background: red;

  position: relative;

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

  -webkit-animation-timing-function: linear; /* Safari 4.0 - 8.0 */

  animation: homzzang 5s infinite;

  animation-timing-function: linear;

}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes homzzang {

  from {left: 0px;}

  to {left: 200px;}

}


@keyframes homzzang {

  from {left: 0px;}

  to {left: 200px;}

}

</style>


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

 

결과보기

 


분류 제목
scroll CSS - scroll-margin-inline-end 속성 -
scroll CSS - scroll-margin-inline-start 속성 -
scroll CSS - scroll-margin-left 속성 -
scroll CSS - scroll-margin-right 속성 -
scroll CSS - scroll-margin-top 속성 -
scroll CSS - scroll-padding 속성 -
scroll CSS - scroll-padding-block 속성 -
scroll CSS - scroll-padding-block-end 속성 -
scroll CSS - scroll-padding-block-start 속성 -
scroll CSS - scroll-padding-bottom 속성 -
scroll CSS - scroll-padding-inline 속성 -
scroll CSS - scroll-padding-inline-end 속성 -
scroll CSS - scroll-padding-inline-start 속성 -
scroll CSS - scroll-padding-left 속성 -
scroll CSS - scroll-padding-right 속성 -
32/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인