에티테마

Css Animation 애니메이션 2 - 키프레임 사용방법

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,032회 작성일 19-07-15 17:10

본문

3ad3c6f8e42f7d7b12ca959388e561ed_1563178228_26.png


css 애니메이션의 키프레임 사용법에 대해서 알아보겠다.

키프레임을 보다보면 from , to 라는 문법도 보이고, 0% , 100% 라는것도 보이기 마련이다.


from 은 애니메이션의 시작을 나타내는 부분이고

to 는 끝나는 지점을 이야기한다.


이걸 세분화하면 % 로 나눌수가 있다.

0% 아무것도 동작하지 않을때

10% 만큼 동작했을때

100% 만큼 동작했을경우로 보면된다.


키프레임을 사용하기 위해서는 해당 엘리먼트 id 값이나 class 값에 애니메이션을

지정해줘야 하는데 이를 위해서 애니메이션 이름을 지정해줘야 한다.


예를들어
 

#ety {} 라는 스타일 시트가 있다고 생각해보자

#ety{ animation-name : demo } 라고 입력하면 키프레임에 사용할 이름을 지정하게 된다.


간단히 문법을 요약해보자면


#ety {
   animation-name : demo;
}
@keyframe demo {
  // 애니메이션 동작내용
}


박스의 색상이 변하는 애니메이션 예제
http://ety.kr/ex/css/css_animation_01.html


코드는 아래와 같다.

<style> 
#ety {
width: 80px;
height: 80px;
background-color: green;
animation-name: demo;
animation-duration: 2s;
animation-iteration-count : infinite; // 무한반복
}

@keyframes demo {
from {background-color: green;}
to {background-color: yellow;}
}
</style>

<div id="ety">ety.kr</div>
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 6건 1 페이지

카테고리

카테고리
 ETC
CSS
 JAVASCRIPT
 BOOTSTRAP
 HTML5
 VUEJS
 REACTJS
 NODEJS
 PHP
 SQL
 SERVER

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트