728x90
반응형
1. 하나의 스타일에서 다른 스타일로 점차적으로 변환되는 것
2. 애니메이션 효과 주기의 첫 단계 : @keyframes 지정
keyframe(키프레임) 이란? 특정 시간에 요소가 가지는 스타일
3. css 속성
@keyframes
- animation-name : keyframes의 이름을 넣어줌
- animation-duration : 애니메이션 효과를 얼마나 유지할 것인가
- animation-delay : 애니메이션 효과를 언제 시작할 것인가
- animation-iteration-count : 애니메이션 효과를 반복할 횟수(infinite는 무한대 반복)
- animation-direction : 애니메이션 효과가 나오는 방식
> 속성 값 : reverse, normal, alternate, alternate-reverse
- animation-timing-function
- animation-fill-mode : 애니메이션 시작 전, 종료 후 그 요소의 스타일을 지정하는 속성(fill-mode를 주지 않으면 원위치로 돌아감)
> 속성값 : forwards, backwards, both, none
> forwards는 마지막 키프레임의 스타일 유지하겠다.
> backwards는 애니메이션 시작 전의 첫번째 키프렘의 스타일 유지
- animation : 약식
[코드 예시]
<style>
div {
width: 100px;
height: 100px;
background: red;
}
.test1 {
animation-name: example1;
animation-duration: 4s;
animation-timing-function: linear; /* 등속 */
animation-delay: 1s; /* 애니메이션 효과를 언제 있다가 시작할 것인가 */
animation-iteration-count: infinite; /* 횟수로 숫자를 줘도 되고, 무한반복해도 됨*/
animation-direction: alternate; /* alternate : 번갈아 나오는*/
}
.test2 {
animation-name: example2;
animation-duration: 4s;
animation-timing-function: linear; /* 등속 */
animation-delay: 1s; /* 애니메이션 효과를 언제 있다가 시작할 것인가 */
animation-fill-mode: both;
position: relative; /* 포지션 속성을 주면 위치도 설정 가능 */
}
.test3 {
width: 100px;
height: 100px;
background: red;
animation-name: example3;
animation-duration: 4s;
animation-timing-function: linear; /* 등속 */
animation-delay: 1s; /* 애니메이션 효과를 언제 있다가 시작할 것인가 */
animation-fill-mode: both; /* 애니메이션이 재생되지 않을 때(시작전, 종료후) 그 요소의 스타일을 지정하는 속성 */
position: relative; /* 포지션 속성을 주면 위치도 설정 가능 */
}
/* @keyframes 프레임이름(내가지어주는것){ */
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
@keyframes example2 {
0% {
background-color: red;
left: 0;
top: 0;
}
25% {
background-color: green;
left: 200px;
top: 0;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: red;
left: 0;
top: 200px;
}
100% {
background-color: yellow;
left: 0;
top: 0;
}
}
@keyframes example3 {
0% {
background-color: red;
left: 0;
top: 0;
}
25% {
background-color: green;
left: 200px;
top: 0;
}
100% {
background-color: blue;
left: 200px;
top: 200px;
}
}
</style>
<body>
<h3>css 애니메이션 효과 - js, flash</h3>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
[애니메이션 효과 진행 중..]
[애니메이션 효과 종료 후..]
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_javascript_days01_클래스 속성 추가, 스타일 / 속성 추가 및 변경, 문자 추가 및 변경, 라디오버튼 / 체크박스 체크 값 가져오기 (0) | 2022.05.28 |
|---|---|
| [SIST] javascript / jquery 맛보기(내용 배울 때마다 추가 중..) (0) | 2022.05.26 |
| [SIST] Web_CSS_days06_CSS 전환 작업(transition 속성) (0) | 2022.05.26 |
| [SIST] Web_CSS_days06_CSS로 2D, 3D 변환 작업(transform 속성) (0) | 2022.05.26 |
| [SIST] Web_CSS_days06_gradient 효과 (0) | 2022.05.26 |