시간(animation-duration) - 애니메이션이 실행되는 총 시간 설정 - (디폴트값0초) s(초)나 ms(1/1000)초로 설정가능
속도함수값(animation-timing-function) - ease: (디폴트값) 느리게 시작하다가 느리게 끝나기 전에 빠르게 처리 -linear : 시작부터 끝까지 동일한 속도로 처리 - ease-in:시작을 느리게함. - ease-out: 끝을 느리게 함 - ease-in-out:시작과 끝을 느리게 처리
반복재생횟수값 (animation-iteration-count) - 숫자값으로 지정 : 지정한 숫자만큼 반복(디폴트1) - infinite : 무한 반복
방향지정값(animation-direction) - normal : (디폴트값) 정방향으로 진행됨(앞으로 진행) - reverse : 역방향으로 진행됨 (뒤에서 앞으로 진행) - alternate: 앞으로 진행되었다가 뒤에서 앞으로 진행됨. - alternate-reverse:뒤에서 앞으로 진행되었다가 다시 앞으로 진행됨.
지연시고정값지정(animation-fill-mode) - none: (디폴트값) 기본 배경색을 지연시간 동안 유지 - forwards : 지연시간 동안 기본 배경색 출력 - backwards : 지연시간동안 첫 프레임 출력 - both:지연시간 동안 첫 프레임 유지
ex
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>animation효과</title>
<style>
/* 키프레임명(animation-name) :메타코드를 사용하여 애니메이션을 지정해준다
방향: top left
@keyframes 키프레임명 {
from{top:0px; background-color:yellow;}
to{top:200px; background-color:red;}
}
또는 시간을 %로 나누어 애니메이션 지정
@keyframes 키프레임명 {
0% {background:red;left:0px;top:0px;}
25% {background:yellow;left:200px;top:0px;}
50% {background:blue;left:200px;top:200px;}
75% {background:green;left:0px;top:200px;}
100% {background:red;left:0px;top:0px;}
}
animation 형식:
animation: 키프레임명 시간설정(s또는ms) [속도함수지정] [지연시간설정(s또는ms)] [반복재생횟수][방향지정][지연시고정값지정];
------------------------------------------------------------------
시간(animation-duration) : 애니메이션이 실행되는 총 시간 설정
(디폴트값0초) s(초)나 ms(1/1000)초로 설정가능
[속도함수값(animation-timing-function)]
ease: (디폴트값) 느리게 시작하다가 느리게 끝나기 전에 빠르게 처리
linear : 시작부터 끝까지 동일한 속도로 처리
ease-in:시작을 느리게함.
ease-out: 끝을 느리게 함
ease-in-out:시작과 끝을 느리게 처리
지연시간설정(animation-delay):
숫자값으로 지정: 1초->1s 1/1000초 ->1ms(디폴트0)
반복재생횟수값 (animation-iteration-count):
숫자값으로 지정 : 지정한 숫자만큼 반복(디폴트1)
infinite : 무한 반복
방향지정값(animation-direction)
normal : (디폴트값) 정방향으로 진행됨(앞으로 진행)
reverse : 역방향으로 진행됨 (뒤에서 앞으로 진행)
alternate: 앞으로 진행되었다가 뒤에서 앞으로 진행됨.
alternate-reverse:뒤에서 앞으로 진행되었다가 다시 앞으로 진행됨.
지연시고정값지정(animation-fill-mode):
none: (디폴트값) 기본 배경색을 지연시간 동안 유지
forwards : 지연시간 동안 기본 배경색 출력
backwards : 지연시간동안 첫 프레임 출력
both:지연시간 동안 첫 프레임 유지 */
div {
width: 100px;
height: 100px;
background: hotpink;
position: relative;
animation: mymove 10s linear 5s infinite;
/* animation: mymove 10s ease-in 1s 1 both; */
animation-direction: reverse;
}
/* @keyframes mymove {
from {
left: 0px;
top: 0px;
}
to {
left: 200px;
top: 200px;
background: yellow
}
} */
@keyframes mymove {
0% {
background: yellow;
left: 0px;
top: 0px;
}
25% {
background: black;
left: 100px;
top: 50px;
}
50% {
background: blue;
left: 150px;
top: 0px;
}
75% {
background: red;
left: 250px;
top: 50px;
}
100% {
background: green;
left: 300px;
top: 0px;
}
}
</style>
</head>
<body>
<h1>The animation Property</h1>
<p>요소를 움직이는 애니메이션 효과를 준 예제입니다.</p>
<div></div>
</body>
</html>
