반응형
1. animation
animation : 통합 속성
animation-delay : 몇 초 후에 재생
animation-direcition : 진행방향
animation-duration : 몇 초 동안 재생
animation-iteration-count : 반복 횟수
animation-name : 이름 지정
animation-play-state : 재생 상태 지정
animation-timing-function : 함수
2. @keyframes
animation과 함께 사용
3. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>애니메이션 속성</title>
<link href="css/ex03.css" rel="stylesheet">
</head>
<body>
<h1>애니메이션 속성</h1>
<div id="ani">
<h1>Rotation</h1>
</body>
</html>
4. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
div#ani{
width:200px;
height:200px;
border-radius:100px;
text-align:center;
background:orange;
position:absolute;
}
div#ani>h1{
line-height:200px;
}
/* 애니메이션 정의 */
@keyframes myani{
from{
left:0;
transform:rotate(0deg);
}
to{
left:500px;
transform:rotate(360deg);
}
}
div#ani{
/* 애니메이션 정의 이름 */
animation-name:myani;
/* 애니메이션 시간 */
animation-duration:2s;
/* 애니메이션 끝난 후의 상태 - 끝 지점에서 끝*/
/* animation-fill-mode:forwards; */
/* 애니메이션 끝난 후의 상태 - 시작 지점에서 끝 */
/* animation-fill-mode:backwords; */
/* 왔다갔다 */
animation-direction:alternate;
/* 무한반복 */
animation-iteration-count:infinite;
animation-timing-function:ease-in;
/* 통합속성 */
/* 이름 시간 함수 지연 카운트 방향 */
animation:myani 2s ease 1s infinite alternate;
}
5. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190622 Basic Study 49(이미지 슬라이드 구현 - 액자형) (0) | 2019.06.22 |
|---|---|
| HTML5 - 190622 Basic Study 48(Animation Box - 연습문제) (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 |
| HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2) (0) | 2019.06.16 |
