KDT 포스코X코딩온 웹 풀스택 과정 10기
드디어 CSS 마지막 시간! 스타뚜
- CSSanimation
2023-10.30
📚 CSS animation
📌 전환 (Transform)
[rotate, sacle, skew, trasnlate]
transform: 변환함수 1 변환함수 2 변환함수 3...;
transform: 원근법 이동 크기 회전 기울임
📌 2D 변환 함수
rotate(degree) 회전(각도)
rotateX(x축)
rotateY(y축)
scale(x, y) 크기(x축, y축)
skew(x, y) 기울임(x축, y축)
skewX(x) 기울임(x축)
skewY(y) 기울임 (y축)
translate(x, y) 이동 (x축, y축)
translateX(x) 이동(x축)
translateY(y) 이동(y축)
📌 transform 예시
| transform: teanslate (40, 40px); /*x축으로 40px Y축으로 40px이동*/ |
2D 변환 함수
rotate(degree) 회전(각도),
scale(x, y) 크기(x축, y축)
skew(x, y) 기울임(x축, y축)
translate(x, y) 이동 (x축, y축)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 10rem;
height: 3rem;
margin-left: 3rem;
border: 1px solid black;
}
#img1 {
/* 10도를 기울인다. */
transform: rotate(10deg);
}
#img2 {
/* 1.5배 커진다 */
transform: scale(1.5);
}
#img3 {
/* 30도 기울인다. */
transform: skew(30deg);
}
/* x축, y축 10px씩 이동 */
#img4 {
transform: translate(10px, 10px);
}
div {
}
p {
padding: 1rem;
}
</style>
</head>
<body>
<p>변경전</p>
<div>
<img src="페페.jpg" alt="" />
<img src="페페.jpg" alt="" />
<img src="페페 .jpg" alt="" />
<img src="페페.jpg" alt="" />
</div>
<p>변경후</p>
<div>
<p>rotate (10deg)</p>
<img id="img1" src="페페.jpg" alt="" />
<p>scale(1.5)</p>
<img id="img2" src="페페.jpg" alt="" />
<p>skew(30deg)</p>
<img id="img3" src="페페.jpg" alt="" />
<p>tanslate(10px, 10px)</p>
<img id="img4" src="페페.jpg" alt="" />
</div>
</body>
</html>
변경 전
변경 후
📌 Transition
[ transition-property, transition-duration, transition-timing-function, transition-delay]
요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
| [단축형 작성] transition: 속성명 지속시간 타이밍함수 대기시간; |
| transtion: all 1s ease-in-out; |
<style>
transition-property: width ; // 속성명 , width, height 만 적용
transition-delay: 0.5; // 대기시간은 0.5초
transition-timing-function:ease ; // ease 사용 : 느리게 - 빠르게 - 느리게
transition-duration: 1s; // 지속시간은 1초
.box:hover {
width: 300px;
height: 200px;
}
</style>
코드 결과
📌 Animation
@keyframes
css의 애니메이션 효과를 개발자가 직접 설정 가능
키프레임에 변수를 설정하여 사용가능하다.
@keyframes로 설정되는 값
to/from
0%~100%
📌 Animation 속성
- 이름 : 애니메이션 이름
- 지속시간 : 애니메이션 지속시간
- 진행형태 : 애니메이션 진행되는 형태 ease /linear 등
- 반복 횟수 : infinite(무한)
| [단축속성] animation name duration timing-fuction delay iteration-count direction |
| animation: myanim 3s ease 1 |
animation-name : myanim ; [애니메이션 이름]
animation-duration : 3s ; [애니메이션 지속시간]
anmation-timing-function : ease ; [ 애니메이션 진행형태]
anmation-iteration-count : 1 ; [애니메이션 반복 횟수]
📌 keyframes를 이용한 animation [ 동그라미가 4방향으로 움직이기]
HTML, CSS 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation(1)</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
animation-name: myanim;
animation-duration: 3s;
/* 애니메이션 반복횟수 */
animation-iteration-count: 6;
/* 어떤 속성? */
animation-timing-function: ease;
/* 1초 후에 작동하게끔 */
animation-delay: 1s;
position: relative;
}
@keyframes myanim {
0% {
left: 0rem;
top: 0rem;
}
25% {
top: 0;
left: 20rem;
}
50% {
top: 20rem;
left: 20rem;
}
75% {
top: 20rem;
left: 0;
}
100% {
top: 0rem;
}
}
</style>
</head>
<body>
<div class="box"></div>
</p>
</body>
</html>
애니메이션 이름은 myanim
애니메이션 반복 횟수는 6번
애니메이션의 속성은 ease [defulat]
애니메이션의 딜레이는 1초를 설정하였다.
📌 keyframes를 이용한 animation [ 마지막 ]
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" />
<link rel="stylesheet" href="./style.css" />
<title>Animation 실습</title>
</head>
<body>
<section>
<article class="sky">
<img src="./img/sun.png" alt="태양" class="sun" />
<img src="./img/moon.png" alt="달" class="moon" />
<img src="./img/cloud.png" alt="큰 구름" class="cloud_1" />
<img src="./img/cloud.png" alt="작은 구름" class="cloud_2" />
</article>
<article class="city">
<img src="./img/city.png" alt="도시" class="city_img" />
</article>
</section>
</body>
</html>
CSS코드
body {
width: 100%;
}
section {
width: 700px;
height: 450px;
background-color: skyblue;
animation: sky 5s ease infinite;
display: flex;
flex-direction: column;
}
section .sky {
width: 100%;
height: 100%;
}
section .sky .sun {
width: 180px;
position: absolute;
top: 30px;
left: 30px;
}
section .sky .moon {
width: 160px;
position: absolute;
top: 30px;
left: 30px;
}
section .sky .cloud_1 {
width: 160px;
position: relative;
top: 7rem;
}
section .sky .cloud_2 {
width: 80px;
position: relative;
top: 8rem;
}
section .city .city_img {
width: 50%;
top: 5rem;
}
.sky {
}
.sun {
animation: sun 5s ease-in-out infinite;
}
.moon {
animation: moon 5s ease-in-out infinite;
}
.cloud_1 {
animation: cloud_1 5s ease-in-out infinite;
}
.cloud_2 {
animation: cloud_2 4s ease-in-out infinite;
}
.city {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/*
@keyframes sky {
/* 낮 */
0% {
background-color: #636888;
}
25% {
background-color: #b1e1e2;
}
50% {
background-color: #fcd2e2;
}
/* 밤 */
75% {
background-color: #675577;
}
100% {
background-color: #636888;
}
}
@keyframes sun {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0.1;
}
75% {
opacity: 0;
}
100% {
transform: rotate(360deg);
opacity: 0;
}
}
@keyframes moon {
0% {
opacity: 0;
transform: rotate(90deg);
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
transform: rotate(-160deg);
opacity: 0;
}
}
@keyframes cloud_1 {
0% {
left: 23%;
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
left: 75%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
left: 23%;
}
}
@keyframes cloud_2 {
0% {
left: 5%;
opacity: 0;
}
25% {
opacity: 1;
}
50% {
left: 65%;
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
left: 5%;
}
}
이번 코드는 link 태그를 사용하여 style.css 생성 후 연결하여 사용하였다.
기초 작업은 코딩온 리더님이 파일을 제공해 주셨다.
애니메이션 작업하다가 정말 어디서부터 진행해야 할지 멘붕이었다.
순서는 [ 배경, 해, 달, 구름, 도시] 순으로 진행했다.
display, position 들어가니 처음에 조금 많이 헷갈렸는데 개발자가 꼭 사용해야 하는 개발자 도구를 통해서
하나씩 찾아가면서 완성시켰다.
이 예제를 한번 연습하고 나니 애니메이션.... 잊지 않을 거 같다..^^;;
내일부터 드디어 javascript 시작이다. 앞으로도 화이팅!
