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

페이지 정보

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

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>

등록된 댓글이 없습니다.