⛏️/HTML | CSS
[CSS] 15. 반응형 - animation
defyuil
2024. 1. 10. 15:18
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
<link href="style.css" rel="stylesheet">
<link href="animation.css" rel="stylesheet">
</head>
<body>
<h1>animation의 정의</h1>
<p class="pre">
@keyframes 애니명 {
0% {속성:속성값;} ----- 첫 장면에서의 상태
...
100% {속성:속성값;} ----- 끝 장면에서의 상태
}
</p>
<h2>animation의 세부 속성들</h2>
<ul>
<li>animation-name (필수) 적용할 애니메이션 이름</li>
<li>animation-duration (필수) 진행 시간</li>
<li>animation-delay 지연 시간</li>
<li>animation-iteration-count 반복 횟수
(무한반복은 infinite)</li>
<li>animation-direction 진행 방향 <br>
(normal/reverse/alternate/alternate-reverse
정방향/역순/왕복/역순왕복)
</li>
<li>animation-timing-function 가속 감속 등<br>
(ease/ease-in/ease-out/ease-in-out/
linear/cubic-bezier(n,n,n,n) )</li>
<li>animation-fill-mode 멈춤 상태일 때의 장면 지정<br>
(none/forwards/backwards/both/initial)
</li>
</ul>
<h2>animation-play-state:paused/running;</h2>
<p>애니메이션의 진행을 멈춤/진행 </p>
<section id="sec01">
<div class="an01">ani-01</div>
<div class="an02">4회 반복</div>
<div class="an03">reverse
</div>
<div class="an04">왕복 4회</div>
</section>
<h3>checkbox/radio 로 만드는 버튼</h3>
<p>1.체크박스나 라디오버튼은 숨김 <br>
2.레이블이 체크박스나 라디오버튼의 기능을 대신하면서<br>
(<b>A:checked</b>선택자는 체크박스나 라디오버튼에 사용가능)
버튼처럼 보이게 꾸밈<br>
3.레이블 버튼의 변화 지정
</p>
<input type="checkbox" id="btn">
<label for="btn" class="la-btn">paused/running</label>
<section id="sec02" class="ani-bg">
<div class="ani01">move-01</div>
<div class="ani02">move-02</div>
<div class="ani03">move-03</div>
<div class="ani04">move-04</div>
</section>
</body>
</html>
CSS
@charset "UTF-8";
.pre {white-space: pre;}
@keyframes circle {
0% {background-color:#f50;
transform:scale(1);
border-radius:0; }
100% {background-color:#05f;
transform:scale(2);
border-radius:50%; }
}
#sec01>div {background-color:#f50;
width: 100px; height: 100px;
text-align: center;
line-height:100px;
display:inline-block;
margin:100px;
animation:circle 4s;}
.an02 {animation-iteration-count:4 !important;}
.an03 {animation-direction:reverse !important;}
.an04 {animation-iteration-count:4 !important;
animation-direction:alternate !important;}
@keyframes move {
0% {left:0;
top:0; }
50% {left:500px;
top:150px;
transform:rotate(0deg); }
70% {transform:rotate(720deg);}
100% {left:1000px;
top:0;
transform:rotate(180deg); }
}
#sec02 {height: 500px;
background-image: url("img/jpg/butterfly.jpg");
background-size: cover;
background-position:50% 50%; }
@keyframes bgimg {
0% {background-image:url("img/jpg/european.jpg");}
5% {background-image:url("img/jpg/butterfly.jpg");}
25% {background-image:url("img/jpg/butterfly.jpg");}
30% {background-image:url("img/jpg/mountain.jpg");}
50% {background-image:url("img/jpg/mountain.jpg");}
55% {background-image:url("img/jpg/sunset.jpg");}
75% {background-image:url("img/jpg/sunset.jpg");}
80% {background-image:url("img/jpg/european.jpg");}
100% {background-image:url("img/jpg/european.jpg");}
}
.ani-bg {animation-name:bgimg;
animation-duration:20s;
animation-iteration-count:infinite;}
/*
.ani-bg:hover {
animation-play-state:paused;} */
#sec02>div {background-color:#0cf;
width: 100px; height: 40px;
position:relative;
animation-name:move;
animation-duration:4s;
animation-iteration-count:infinite; }
.ani01 {animation-delay:1s;}
.ani02 {animation-delay:1.5s;
animation-direction:reverse;}
.ani03 {animation-delay:2s;
animation-direction:
alternate-reverse;}
.ani04 {animation-delay:2.5s;}
/* checkbox/radio로 만드는 버튼 */
#btn {display: none;
/* 1.체크박스나 라디오버튼은 숨김 */}
.la-btn {/* 2.레이블이 체크박스나 라디오버튼의
기능을 대신하면서 버튼처럼 보이게 꾸밈*/
border:4px solid;
background-color: #ccc;
padding: 10px 50px;
border-radius: 6px;
text-transform: capitalize;
font-weight:bold;
color: #333;
display: inline-block;
transform:translate(50px,550px);
}
.la-btn:hover {/* 3.레이블 버튼의 변화 */
background-color: #333;
color: #ccc;
text-shadow: 0 0 4px #c3d; }
#btn:checked+.la-btn {
/* 3-1.버튼변화를 고정하고 싶을때
(숨겨진 체크박스나 라디오버튼이 체크되었을때
레이블 버튼의 변화 지정) */
background-color: #333;
color: #ccc;
margin: 1px 0 0 1px;
}
#btn:checked~#sec02>div {
animation-play-state:paused;}
