더보기
-애니메이션 등록
@keyframs 애니메이션명{
시간비율{속성1; 값1; 속성2; 값2;} //이전 시점에서 시간 비율까지 적용할 속성
시간비율{속성1; 값1; 속성2; 값2;}
}
- 애니메이션을 호출
선택자{
animation-name : 애니메이션명;
animation-duration : 시간; // %로 쓸수있음
animation-iteration-count : 애니메이션반복횟수; //반복횟수는 숫자 or infinite
}
<!DOCTYPE html>
<html lang="en">
<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>애니메이션 예제1</title>
<style>
/* 꽝 이라는 글자를 애니메이션 효과를 이용해서 크게만들기*/
@keyframes textScale{
0%{font-size: 20px;}
100%{font-size: 100px;}
}
.text{animation-name: textScale; animation-duration: 2s; animation-iteration-count: 1;}
/* 호버라는 글자에 마우스를 가져다 대면 글자가 20px에서 100px까지 커졌다가 20px로 작아지도록 코드를 작성하세요*/
.hover:hover{animation:textScale 2s 1;}
</style>
</head>
<body>
<span class="text">꽝</span>
<span class="hover">호버</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>애니메이션(링크) 예제</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
.box{border: 2px solid red; width: 200px; height: 200px;
position: absolute; top: 200px; left:200px;
animation: zoomInDown 2s infinite; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>애니메이션 예제3</title>
<style>
/* 박스가 오른쪽으로 이동했다가 원래 위치로 돌아오는 애니메이션을 만드세요.(무한반복)*/
.box1{width: 200px; height: 200px; border: 2px solid tan;
position: absolute; top: calc(50% - 100px); }
.box2{width: 150px; height: 150px; border: 2px solid teal; position: relative;}
@keyframes toRight1{
0%{right:calc(50% - 100px);}
50%{right:0;}
100%{right:calc(50% - 100px);}
}
/*margin을 이용한 이동은, display가 inline-block일때, 다른 box까지도 같이 밀어서 움직이게 함*/
@keyframes toRight2{
0%{margin-left: 0;}
50%{margin-left: 100px;}
100%{margin-left: 0;}
}
.box1{animation: toRight1 2s infinite;}
.box2{animation: toRight2 2s infinite;}
</style>
</head>
<body>
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_아이콘 예제 (0) | 2021.06.13 |
|---|---|
| CSS_상단, 좌측 메뉴바 만들기 (0) | 2021.06.13 |
| CSS_네이버 검색창 만들기 (0) | 2021.06.13 |
| CSS_문단관련 속성 (0) | 2021.06.13 |
| CSS_화면기준 단위 vw, vh (0) | 2021.06.13 |