CSS

[animation] CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10)

animation-iteration-count 예제

 

<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-iteration-count: 2;

}


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

분류 제목
intro CSS - 브라우저 접두어 (= vendor prefix = 벤더 프리픽스)
border CSS - border-radius 속성 ★ - 테두리둥글기 지정 (= border-radius속성 = 보더…
border CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…
border CSS - border-top-right-radius 속성 - 테두리상단우측둥글기 지정 (= 보더탑라이트레이…
border CSS - border-bottom-right-radius 속성 - 테두리 하단 오른쪽 모서리 둥글게 (= …
border CSS - border-bottom-left-radius 속성 - 테두리하단왼쪽모서리둥글게 (= border…
border CSS - border-image 속성 - 테두리이미지 (= border-image속성 = 보더이미지속성, …
border CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…
border CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)
border CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-wid…
border CSS - border-image-outset 속성 - 테두리 경계 넘는 이미지 양. (= 보더이미지아웃셋속…
border CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리…
background CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…
background CSS - background-origin 속성 - 배경이미지 좌표시작점 (= 백그라운드오리진 속성)
background CSS - background-size 속성 ★ - 배경이미지 크기 (IE9) ※ 배경이미지 중첩
9/33
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱 PC버전 로그인