|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 08</title>
<style type="text/css">
div.key, div.dir, div.box > div{
background-color:pink;
width:150px;
height:150px;
border-color:red;
}
div.box, div.direction{
display:inline-block;
border:2px solid blue;
width:150px
}
/*@keyframes - 정지된 이미지를 연속적으로 출력하여 움직이는것 처럼 표현*/
div.key:hover, div.box:hover > div, div.direction:hover > div{
animation-name:key; /*특정요소에 적용할 키 프레임 이름*/
animation-duration:5s; /*애니메이션의 지속 시간을 설정*/
animation-delay:1s; /*애니메이션의 시작 지연을 설정*/
animation-iteration-count: 1; /*애니에미션의 반복 횟수 (infinite속성값을 사용하면 무한으로 반복*/
}
@keyframes key { /*animation-name명이 key의 요소를 애니메이션화*/
0%{background-color:red;} /*시간에 대한 타이밍을 %로 지정*/
25%{background-color:orange;}
50%{background-color:yellow;}
100%{background-color:green;}
}
/*animation-fill-mode - 애니메이션이 실행되기 전과 후의 스타일을 설정*/
div.box:hover > div.fill-none {
animation-fill-mode: none; /*실행 전 - 시작 시점의 스타일을 적용하지 않고 대기*/
} /*실행 후 - 실행되기 전의 스타일을 적용 상태로 되돌아감*/
div.box:hover > div.fill-forwards {
animation-fill-mode: forwards; /*실행 전 - 시작 시점의 스타일을 적용하지 않고 대기*/
} /*실행 후 - 키프레임에 정의된 종료시점의 스타일 적용상태로 대기*/
div.box:hover > div.fill-backwards {
animation-fill-mode: backwards; /*실행 전 - 키프레임에 정의된 시작시점의 스타일을 적용하고 대기*/
} /*실행 후 - 실행되기 전의 스타일을 적용 상태로 되돌아감*/
div.box:hover > div.fill-both {
animation-fill-mode: both; /*실행 전 - 키프레임에 정의된 시작시점의 스타일을 적용하고 대기*/
} /*실행 후 - 키프레임에 정의된 종료시점의 스타일 적용상태로 대기*/
/*animation-direction - 애니메이션의 진행 방향을 지정*/
div.direction:hover > div.normal {
animation-direction:normal; /*애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행*/
animation-iteration-count: 2
}
div.direction:hover > div.reverse {
animation-direction:reverse; /*애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서의 역으로 진행*/
animation-iteration-count: 2
}
div.direction:hover > div.alternate {
animation-direction:alternate; /*1회이상 실행될 경우 홀수 번째는 normal, 짝수 번째는 reverse로 진행*/
animation-iteration-count: 2
}
div.direction:hover > div.alternate-reverse {
animation-direction:alternate-reverse; /*1회이상 실행될 경우 홀수 번째는 reverse, 짝수 번째는 normal로 진행*/
animation-iteration-count: 2
}
/*animation-timing-function - 애니메이션의 속도를 지정*/
div.speed {
border:2px solid blue;
width:500px
}
div.speed > div{
background-color:aquamarine;
width:200px;
height:80px;
border-color:red;
}
div.speed:hover > div {
animation-name:speed;
animation-duration:5s;
animation-iteration-count: 3;
}
@keyframes speed {
0%{background-color:red; width:200px}
25%{background-color:orange; width:300px}
50%{background-color:yellow; width:400px}
100%{background-color:green; width:500px}
}
div.speed:hover > div.linear {
animation-timing-function:linear; /*처음 속도와 마지막 속도가 일정*/
}
div.speed:hover > div.ease {
animation-timing-function:ease; /*처음에는 속도가 점점 빨라지다가 중간부터 느려짐*/
}
div.speed:hover > div.ease-in {
animation-timing-function:ease-in; /*처음에는 속도가 느리지만 완료될 때까지 점점 빨라짐*/
}
div.speed:hover > div.ease-out {
animation-timing-function:ease-out; /*처음에는 속도가 빠르지만 완료될 때까지 점점 느려짐*/
}
div.speed:hover > div.ease-in-out {
animation-timing-function:ease-in-out; /*처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려짐*/
}
/*animation 속성 역시 한번에 설정이 가능하다.*/
/*animation:name duration timing-function delay iteration-count direction fill-mode play-state*/
/*모두 다 작성할 필요는 없고 필요한 부분만 설정하면 된다.*/
/*지속 시간, 지연시간의 단위가 같으므로 지연시간을 적용할려면 지속 시간 기입 후 다음에 오는 시간이 지연시간이 된다.*/
/*"speed키프레임의 이름"의 동작을 "10초"동안 "일정한 속도"로 "2초후"에 "1번만" 키프레임의 "역순"으로*/
/*키프레임의 스타일을 적용하고 있다가 끝나면 원래 모습으로 되돌아감*/
div.speed:hover > div.all {
animation:speed 10s linear 2s 1 reverse backwards;
}
</style>
</head>
<body>
<div class="key">마우스를 올리면 1초 후에 배경 색이 변경</div> <br>
<div class="box">
<div class="fill-none">animation-fill-mode<br>none</div><br>
<div class="fill-forwards">animation-fill-mode<br>forwards</div><br>
<div class="fill-backwards">animation-fill-mode<br>backwards</div><br>
<div class="fill-both">animation-fill-mode<br>both</div>
</div>
<div class="direction">
<div class="dir normal">animation-direction<br>normal</div> <br>
<div class="dir reverse">animation-direction<br>reverse</div> <br>
<div class="dir alternate">animation-direction<br>alternate</div> <br>
<div class="dir alternate-reverse">animation-direction<br>alternate-reverse</div>
</div> <br> <br>
<div class="speed">
<div class="linear">animation-timing-function<br>linear</div> <br>
<div class="ease">animation-timing-function<br>ease</div> <br>
<div class="ease-in">animation-timing-function<br>ease-in</div> <br>
<div class="ease-out">animation-timing-function<br>ease-out</div> <br>
<div class="ease-in-out">animation-timing-function<br>ease-in-out</div> <br> <br>
<div class="all" style="background-color:purple; color:white">한번에 설정</div>
</div>
</body>
</html>
|
마우스를 올리면 1초 후에 배경 색이 변경 animation-fill-mode none animation-fill-mode forwards animation-fill-mode backwards animation-fill-mode
both animation-direction normal animation-direction reverse animation-direction alternate animation-direction
alternate-reverse animation-timing-function linear animation-timing-function ease animation-timing-function ease-in animation-timing-function ease-out animation-timing-function ease-in-out 한번에 설정
|
'CSS' 카테고리의 다른 글
| CSS font-family (0) | 2023.04.06 |
|---|---|
| CSS transform - translate, scale, skew, rotate, transform-origin (0) | 2023.04.05 |
| CSS - transition (0) | 2023.04.04 |
| CSS - float, clear (0) | 2023.04.04 |
| CSS position - relative, absolute, fixed, sticky, z-index (0) | 2023.04.04 |