CSS에서 애니메이션 효과를 줄 수 있다.
css에서 작성.
1.애니메이션 속성을 하나 만들어준다.
@keyframes 애니메이션이름 {
from(=0%) {
margin-left: 0; 마지막은from에서 멈춘다.
}
50% {
}
to =100%) {
margin-left: 400px;
}
2. 적용시킬 엘리먼트에 애니메이션을 불러온다.
animation-name: box_ani;
=> 애니메이션 이름 부여 (keyframes에 적용시킨 이름)
3. 애니메이션 속성을 각각 부여한다. (축약형 사용가능)
animation: moving 1s 3s forwards alternate 3;
/* =>에니메이션 축약형
=>순서 상관없이 띄어쓰기로 구분된다,
=> 단, duration은 앞에 delay값은 뒤에 적어준다. */
<예제1> 설명
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: darkcyan;
animation-name: box_ani;
/* => 애니메이션 이름 부여 (keyframes에 적용시킨 이름) */
animation-duration: 1s;
/* => 애니메이션 움직임 시간 부여 */
animation-iteration-count: 3;
/* => 애니메이션 반복 횟수 지정 (단위없으)
=> infinite 무한대로 */
animation-direction: alternate;
/* => nommal :기본값만 쓴다.
=> reverse :방향을 to~from 으로 움직임을 바꾼다.
=> alternate :from~to~from 왔다갔다 하는 움직임
=> alternate-reverse :to~from~to 왔다갔다 하는 움직임 */
animation-fill-mode: forwards;
/* =>애니메이션이 끝나고 난뒤 그 위치에서 멈춰있도록 설정 */
animation-timing-function: ease-in-out;
/* => 애니메이션 가속도 조절 */
animation-delay: 2s;
/* => 애니메이션에 지연시간 추가 */
}
@keyframes box_ani {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
/*
@keyframes 애니메이션이름 {
from(=0%) {
margin-left: 0; 마지막은from에서 멈춘다.
}
50% {
}
to (=100%) {
margin-left: 400px;
}
} */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
실무에서 사용은 축약형으로 쓴다.
animation: moving 1s 3s forwards alternate 3;
/* =>에니메이션 축약형
=>순서 상관없이 띄어쓰기로 구분된다,
=> 단, duration은 앞에 delay값은 뒤에 적어준다. */
<예제2> 3개의 사각형이 각각 움직인다. 풀이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>예제풀이</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
animation: box_ani 3s infinite alternate;
/* 동일한 움직임은 따로 빼준다. */
}
.box_1 {
background-color: antiquewhite;
}
.box_2 {
background-color: aqua;
animation-delay: 0.5s;
}
.box_3 {
background-color: blue;
animation-delay: 1s;
}
@keyframes box_ani {
0% {
top: 0;
left: 0;
}
50% {
top: 300px;
left: 300px;
border-radius: 25%;
}
100% {
top: 0;
left: 600px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3"></div>
</body>
</html>
'언어 > HTML & CSS' 카테고리의 다른 글
| 응용) HTML 과 CSS (폼태그 속성, form tag ,form 태그,로그인 만들기) (0) | 2023.11.17 |
|---|---|
| 응용) HTML 과 CSS (flex 속성) (0) | 2023.11.15 |
| 입문) HTML 과 CSS (반응형 12칼럼 그리드 만들기) (0) | 2023.06.29 |
| 입문) HTML 과 CSS (반응형 그리드 , 범용클래스 ) (0) | 2023.06.28 |
| 입문) CSS (반응형 그리드) (0) | 2023.06.11 |
