Share
Sign In
애니메이션 - @keyframes 와 animation
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes identifier {
from {
margin-left: 100%;
width: 300%;
}to {
margin-left: 0%;
width: 100%;
}
}
@keyframes identifier {
0%{
margin-left: 100%;
width: 300%;
}50%{
margin-left: 50%;
width: 200%;
}100%{
margin-left: 0%;
width: 100%;
}
}키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.
animation
애니메이션을 움직이는 각각의 형태는 키프레임으로 구성되어 있다.
animation : 모든 animation 속성을 한 번에 적용한다.
animation-name : 애니메이션 이름을 지정한다.
animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정한다.
animation-direction : 애니메이션 진행 방향을 설정한다.
animation-duration : 애니메이션을 몇 초 동안 재생할지 지정한다.
animation-iteration-count : 애니메이션 반복 횟수를 지정한다.
animation-play-state : 애니메이션 재생 상태를 지정한다.
animation-timing-function : 수치 변형 함수를 지정한다.
animation
animation 구문
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;형식 구문
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | endanimation-direction
alternate : from에서 to로 이동후 to에서 from으로 이동을 반복합니다.
normal : 계속 from에서 to로 이동합니다.
reverse : 역방향으로 움직입니다.
alternate-reverse : 역방향으로 움직인 후 정방향으로 움직인다.
animation-iteration-count
<integer> : 3이라고 지정할 경우 3번 반복합니다.
infinite : 애니메이션을 무한 반복합니다.
animation-play-state
애니메이션 재생 및 중지 시 반응 선택자와 함께 사용하여 제어할 수 있습니다.
animation-timing-function
linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in : 애니메이션 효과가 천천히 시작됩니다.
ease-out : 애니메이션 효과가 천천히 끝납니다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;애니메이션 예제
1.
기본예제 : 공굴리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<style>
*{margin:0; padding:0;}
#wrap{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
text-align: center;
/* 그라데이션 넣는 법*/
background:linear-gradient(to bottom, rgba(135,224,253,1) 0%, rgb(4, 228, 97) 50%, rgb(157, 199, 6) 100% );
animation-name: A_rotate;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#wrap:hover{
animation-play-state: paused;
}
h1{
line-height: 175px;
}
@keyframes A_rotate {
from{
left:0px;
transform:rotate(0deg);
}50%{
left:250px;
}to{
left:500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>2.
기본예제 : 회전하는 영화 포스터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pespective_poster</title>
<link href="" rel="stylesheet" type="text/css">
<link type="text/css" href="" rel="stylesheet" >
<style>
.box1{zoom: 0.3;}
.wrap{
perspective: 500px;
}
.poster{
width:300px;
margin: 50px auto;
background-color: #53535366;
transform: rotateY(50deg);
/*transform-style: preserve-3d;*/
animation: spin 5s linear infinite;
}
.img img {width:100%;
transform-origin: top;
vertical-align: top;
transform: rotateX(0deg);
transition: transform .4s ease;
}
@keyframes spin {
0%{
transform:rotateY(0deg);
}100%{
transform:rotateY(360deg);
}
}
.poster:hover img{transform:rotateX(40deg)}
</style>
</head>
<body>
<!-- <div class="box1"><img src="./images/poster.png" alt="포스터입니디."></div> -->
<div class="wrap">
<div class="poster">
<div class="img">
<img src="./images/poster.png" alt="">뮬란 보기
</div>
</div>
</div>
</body>
</html>CSS 홈으로 가기
CSS3
메인으로 가기
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes identifier {
from {
margin-left: 100%;
width: 300%;
}to {
margin-left: 0%;
width: 100%;
}
}
@keyframes identifier {
0%{
margin-left: 100%;
width: 300%;
}50%{
margin-left: 50%;
width: 200%;
}100%{
margin-left: 0%;
width: 100%;
}
}키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.
animation
애니메이션을 움직이는 각각의 형태는 키프레임으로 구성되어 있다.
animation : 모든 animation 속성을 한 번에 적용한다.
animation-name : 애니메이션 이름을 지정한다.
animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정한다.
animation-direction : 애니메이션 진행 방향을 설정한다.
animation-duration : 애니메이션을 몇 초 동안 재생할지 지정한다.
animation-iteration-count : 애니메이션 반복 횟수를 지정한다.
animation-play-state : 애니메이션 재생 상태를 지정한다.
animation-timing-function : 수치 변형 함수를 지정한다.
animation
animation 구문
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;형식 구문
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | endanimation-direction
alternate : from에서 to로 이동후 to에서 from으로 이동을 반복합니다.
normal : 계속 from에서 to로 이동합니다.
reverse : 역방향으로 움직입니다.
alternate-reverse : 역방향으로 움직인 후 정방향으로 움직인다.
animation-iteration-count
<integer> : 3이라고 지정할 경우 3번 반복합니다.
infinite : 애니메이션을 무한 반복합니다.
animation-play-state
애니메이션 재생 및 중지 시 반응 선택자와 함께 사용하여 제어할 수 있습니다.
animation-timing-function
linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in : 애니메이션 효과가 천천히 시작됩니다.
ease-out : 애니메이션 효과가 천천히 끝납니다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;애니메이션 예제
1.
기본예제 : 공굴리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<style>
*{margin:0; padding:0;}
#wrap{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
text-align: center;
/* 그라데이션 넣는 법*/
background:linear-gradient(to bottom, rgba(135,224,253,1) 0%, rgb(4, 228, 97) 50%, rgb(157, 199, 6) 100% );
animation-name: A_rotate;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#wrap:hover{
animation-play-state: paused;
}
h1{
line-height: 175px;
}
@keyframes A_rotate {
from{
left:0px;
transform:rotate(0deg);
}50%{
left:250px;
}to{
left:500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>2.
기본예제 : 회전하는 영화 포스터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pespective_poster</title>
<link href="" rel="stylesheet" type="text/css">
<link type="text/css" href="" rel="stylesheet" >
<style>
.box1{zoom: 0.3;}
.wrap{
perspective: 500px;
}
.poster{
width:300px;
margin: 50px auto;
background-color: #53535366;
transform: rotateY(50deg);
/*transform-style: preserve-3d;*/
animation: spin 5s linear infinite;
}
.img img {width:100%;
transform-origin: top;
vertical-align: top;
transform: rotateX(0deg);
transition: transform .4s ease;
}
@keyframes spin {
0%{
transform:rotateY(0deg);
}100%{
transform:rotateY(360deg);
}
}
.poster:hover img{transform:rotateX(40deg)}
</style>
</head>
<body>
<!-- <div class="box1"><img src="./images/poster.png" alt="포스터입니디."></div> -->
<div class="wrap">
<div class="poster">
<div class="img">
<img src="./images/poster.png" alt="">뮬란 보기
</div>
</div>
</div>
</body>
</html>CSS 홈으로 가기
CSS3
메인으로 가기
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes identifier {
from {
margin-left: 100%;
width: 300%;
}to {
margin-left: 0%;
width: 100%;
}
}
@keyframes identifier {
0%{
margin-left: 100%;
width: 300%;
}50%{
margin-left: 50%;
width: 200%;
}100%{
margin-left: 0%;
width: 100%;
}
}키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.
animation
애니메이션을 움직이는 각각의 형태는 키프레임으로 구성되어 있다.
animation : 모든 animation 속성을 한 번에 적용한다.
animation-name : 애니메이션 이름을 지정한다.
animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정한다.
animation-direction : 애니메이션 진행 방향을 설정한다.
animation-duration : 애니메이션을 몇 초 동안 재생할지 지정한다.
animation-iteration-count : 애니메이션 반복 횟수를 지정한다.
animation-play-state : 애니메이션 재생 상태를 지정한다.
animation-timing-function : 수치 변형 함수를 지정한다.
animation
animation 구문
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;형식 구문
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | endanimation-direction
alternate : from에서 to로 이동후 to에서 from으로 이동을 반복합니다.
normal : 계속 from에서 to로 이동합니다.
reverse : 역방향으로 움직입니다.
alternate-reverse : 역방향으로 움직인 후 정방향으로 움직인다.
animation-iteration-count
<integer> : 3이라고 지정할 경우 3번 반복합니다.
infinite : 애니메이션을 무한 반복합니다.
animation-play-state
애니메이션 재생 및 중지 시 반응 선택자와 함께 사용하여 제어할 수 있습니다.
animation-timing-function
linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in : 애니메이션 효과가 천천히 시작됩니다.
ease-out : 애니메이션 효과가 천천히 끝납니다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;애니메이션 예제
1.
기본예제 : 공굴리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<style>
*{margin:0; padding:0;}
#wrap{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
text-align: center;
/* 그라데이션 넣는 법*/
background:linear-gradient(to bottom, rgba(135,224,253,1) 0%, rgb(4, 228, 97) 50%, rgb(157, 199, 6) 100% );
animation-name: A_rotate;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#wrap:hover{
animation-play-state: paused;
}
h1{
line-height: 175px;
}
@keyframes A_rotate {
from{
left:0px;
transform:rotate(0deg);
}50%{
left:250px;
}to{
left:500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>2.
기본예제 : 회전하는 영화 포스터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pespective_poster</title>
<link href="" rel="stylesheet" type="text/css">
<link type="text/css" href="" rel="stylesheet" >
<style>
.box1{zoom: 0.3;}
.wrap{
perspective: 500px;
}
.poster{
width:300px;
margin: 50px auto;
background-color: #53535366;
transform: rotateY(50deg);
/*transform-style: preserve-3d;*/
animation: spin 5s linear infinite;
}
.img img {width:100%;
transform-origin: top;
vertical-align: top;
transform: rotateX(0deg);
transition: transform .4s ease;
}
@keyframes spin {
0%{
transform:rotateY(0deg);
}100%{
transform:rotateY(360deg);
}
}
.poster:hover img{transform:rotateX(40deg)}
</style>
</head>
<body>
<!-- <div class="box1"><img src="./images/poster.png" alt="포스터입니디."></div> -->
<div class="wrap">
<div class="poster">
<div class="img">
<img src="./images/poster.png" alt="">뮬란 보기
</div>
</div>
</div>
</body>
</html>CSS 홈으로 가기
CSS3
메인으로 가기
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes identifier {
from {
margin-left: 100%;
width: 300%;
}to {
margin-left: 0%;
width: 100%;
}
}
@keyframes identifier {
0%{
margin-left: 100%;
width: 300%;
}50%{
margin-left: 50%;
width: 200%;
}100%{
margin-left: 0%;
width: 100%;
}
}키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.
animation
애니메이션을 움직이는 각각의 형태는 키프레임으로 구성되어 있다.
animation : 모든 animation 속성을 한 번에 적용한다.
animation-name : 애니메이션 이름을 지정한다.
animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정한다.
animation-direction : 애니메이션 진행 방향을 설정한다.
animation-duration : 애니메이션을 몇 초 동안 재생할지 지정한다.
animation-iteration-count : 애니메이션 반복 횟수를 지정한다.
animation-play-state : 애니메이션 재생 상태를 지정한다.
animation-timing-function : 수치 변형 함수를 지정한다.
animation
animation 구문
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;형식 구문
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | endanimation-direction
alternate : from에서 to로 이동후 to에서 from으로 이동을 반복합니다.
normal : 계속 from에서 to로 이동합니다.
reverse : 역방향으로 움직입니다.
alternate-reverse : 역방향으로 움직인 후 정방향으로 움직인다.
animation-iteration-count
<integer> : 3이라고 지정할 경우 3번 반복합니다.
infinite : 애니메이션을 무한 반복합니다.
animation-play-state
애니메이션 재생 및 중지 시 반응 선택자와 함께 사용하여 제어할 수 있습니다.
animation-timing-function
linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in : 애니메이션 효과가 천천히 시작됩니다.
ease-out : 애니메이션 효과가 천천히 끝납니다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;애니메이션 예제
1.
기본예제 : 공굴리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<style>
*{margin:0; padding:0;}
#wrap{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
text-align: center;
/* 그라데이션 넣는 법*/
background:linear-gradient(to bottom, rgba(135,224,253,1) 0%, rgb(4, 228, 97) 50%, rgb(157, 199, 6) 100% );
animation-name: A_rotate;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#wrap:hover{
animation-play-state: paused;
}
h1{
line-height: 175px;
}
@keyframes A_rotate {
from{
left:0px;
transform:rotate(0deg);
}50%{
left:250px;
}to{
left:500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>2.
기본예제 : 회전하는 영화 포스터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pespective_poster</title>
<link href="" rel="stylesheet" type="text/css">
<link type="text/css" href="" rel="stylesheet" >
<style>
.box1{zoom: 0.3;}
.wrap{
perspective: 500px;
}
.poster{
width:300px;
margin: 50px auto;
background-color: #53535366;
transform: rotateY(50deg);
/*transform-style: preserve-3d;*/
animation: spin 5s linear infinite;
}
.img img {width:100%;
transform-origin: top;
vertical-align: top;
transform: rotateX(0deg);
transition: transform .4s ease;
}
@keyframes spin {
0%{
transform:rotateY(0deg);
}100%{
transform:rotateY(360deg);
}
}
.poster:hover img{transform:rotateX(40deg)}
</style>
</head>
<body>
<!-- <div class="box1"><img src="./images/poster.png" alt="포스터입니디."></div> -->
<div class="wrap">
<div class="poster">
<div class="img">
<img src="./images/poster.png" alt="">뮬란 보기
</div>
</div>
</div>
</body>
</html>CSS 홈으로 가기
CSS3
메인으로 가기
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes identifier {
from {
margin-left: 100%;
width: 300%;
}to {
margin-left: 0%;
width: 100%;
}
}
@keyframes identifier {
0%{
margin-left: 100%;
width: 300%;
}50%{
margin-left: 50%;
width: 200%;
}100%{
margin-left: 0%;
width: 100%;
}
}키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.
animation
애니메이션을 움직이는 각각의 형태는 키프레임으로 구성되어 있다.
animation : 모든 animation 속성을 한 번에 적용한다.
animation-name : 애니메이션 이름을 지정한다.
animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정한다.
animation-direction : 애니메이션 진행 방향을 설정한다.
animation-duration : 애니메이션을 몇 초 동안 재생할지 지정한다.
animation-iteration-count : 애니메이션 반복 횟수를 지정한다.
animation-play-state : 애니메이션 재생 상태를 지정한다.
animation-timing-function : 수치 변형 함수를 지정한다.
animation
animation 구문
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;형식 구문
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ko/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | endanimation-direction
alternate : from에서 to로 이동후 to에서 from으로 이동을 반복합니다.
normal : 계속 from에서 to로 이동합니다.
reverse : 역방향으로 움직입니다.
alternate-reverse : 역방향으로 움직인 후 정방향으로 움직인다.
animation-iteration-count
<integer> : 3이라고 지정할 경우 3번 반복합니다.
infinite : 애니메이션을 무한 반복합니다.
animation-play-state
애니메이션 재생 및 중지 시 반응 선택자와 함께 사용하여 제어할 수 있습니다.
animation-timing-function
linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in : 애니메이션 효과가 천천히 시작됩니다.
ease-out : 애니메이션 효과가 천천히 끝납니다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;애니메이션 예제
1.
기본예제 : 공굴리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<style>
*{margin:0; padding:0;}
#wrap{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
text-align: center;
/* 그라데이션 넣는 법*/
background:linear-gradient(to bottom, rgba(135,224,253,1) 0%, rgb(4, 228, 97) 50%, rgb(157, 199, 6) 100% );
animation-name: A_rotate;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#wrap:hover{
animation-play-state: paused;
}
h1{
line-height: 175px;
}
@keyframes A_rotate {
from{
left:0px;
transform:rotate(0deg);
}50%{
left:250px;
}to{
left:500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>2.
기본예제 : 회전하는 영화 포스터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pespective_poster</title>
<link href="" rel="stylesheet" type="text/css">
<link type="text/css" href="" rel="stylesheet" >
<style>
.box1{zoom: 0.3;}
.wrap{
perspective: 500px;
}
.poster{
width:300px;
margin: 50px auto;
background-color: #53535366;
transform: rotateY(50deg);
/*transform-style: preserve-3d;*/
animation: spin 5s linear infinite;
}
.img img {width:100%;
transform-origin: top;
vertical-align: top;
transform: rotateX(0deg);
transition: transform .4s ease;
}
@keyframes spin {
0%{
transform:rotateY(0deg);
}100%{
transform:rotateY(360deg);
}
}
.poster:hover img{transform:rotateX(40deg)}
</style>
</head>
<body>
<!-- <div class="box1"><img src="./images/poster.png" alt="포스터입니디."></div> -->
<div class="wrap">
<div class="poster">
<div class="img">
<img src="./images/poster.png" alt="">뮬란 보기
</div>
</div>
</div>
</body>
</html>CSS 홈으로 가기
CSS3
메인으로 가기
@keyframs
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.