반응형
1. 사전조건
- 너비 100px / 높이 100px / 색상 orange
- box1 위치 : position:relative / top 50px / left 0px
- box2 위치 : position:relative / top 50px / left 200px
- box1 0% 키프레임 : left 0px / 색상 orange
- box1 50% 키프레임 : top 100px / left 0px / 색상 blue / 180도 회전
- box1 100% 키프레임 : left 200px / 색상 orange / 360도 회전
- box2 0% 키프레임 : left 200px / 색상 orange
- box2 50% 키프레임 : top 100px / left 100px / 색상 blue / 180도 회전
- box3 100% 키프레임 : left 0px / 색상 orange / 360도 회전
- 애니메이션 실행 시간 : 3s
- 애니메이션이 시작되기 전 대기 시간 : 0.5s
- 애니메이션 반복 횟수 : infinite
- 키 프레임의 연결 방향 : alternate
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>애니메이션 연습문제</title>
<link href="css/ex04.css" rel="stylesheet">
</head>
<body>
<div id="aaa">box1</div>
<div id="bbb">box2</div>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0 auto;
padding:0;
}
/* 1. 너비 100px 높이 100px 의 orange 박스 2개 생성 */
#aaa,#bbb{
width:100px;
height:100px;
background:orange;
position:relative;
}
/* 2. 위치에 대하여 각각 position:relative;top50px;left0px;position:realative;top50px;left:20px
지정한다. */
#aaa{
left:0px;
top:50px;
}
#bbb{
left:200px;
top:50px;
}
/* 3. 첫번 째 키 프레임 조건 */
/* 0% 박스위치 left 0px 박스 색상 orange
50% 박스위치 top 100px 박스 색상 blue 180도 회전
100% 박스위치 left 200px, 박스 색상 orange 360도 회전 */
@keyframes aaa{
0{
left:0;
background-color:orange;
}
50%{
top:100px;
left:0px;
background-color:blue;
transform:rotate(180deg);
}
100%{
left:200px;
background-color:orange;
transform:rotate(360deg);
}
}
/* 4. 두번 째 키 프레임 조건 */
/* 0% 박스위치 left 200px 박스 색상 orange
50% 박스위치 top 100px left 100px 박스 색상 blue 180도 회전
100% 박스위치 left 0px 박스 색상 orange 360도 회전 */
@keyframes bbb{
0{
left:200px;
background-color:orange;
}
50%{
top:100px;
left:100px;
background-color:blue;
transform:rotate(180deg);
}
100%{
left:200px;
background-color:orange;
transform:rotate(360deg);
}
}
#aaa{
animation-name:aaa;
}
#bbb{
animation-name:bbb;
}
/* 5. 지정 조건
실행시간 3s 대기시간 0.5s 반복 회수 infinite 연결방향 alternate */
#aaa, #bbb{
animation-duration:3s;
animation-delay:0.5s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
#aaa:hover, #bbb:hover{
/* 중지 */
animation-play-state:paused;
}
4. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190622 Basic Study 50(이미지 슬라이드 - 상하좌우) (0) | 2019.06.22 |
|---|---|
| HTML5 - 190622 Basic Study 49(이미지 슬라이드 구현 - 액자형) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 47(Animation 효과) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 46(Transition Graph) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 45(transition 효과 주기) (0) | 2019.06.22 |
