트랜지션과-애니메이션
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
📁 시작파일
🥇완료파일
Info: 📖 animation
01. transition
Info: 👁️🗨️
transition-property(en-US)transition-duration(en-US)transition-timing-function(en-US)transition-delay를 위한 단축 속성
02. transform
https://drive.google.com/file/d/1XLbC1IKHRrMrjq762KRaz0cv1Zmyw8Zv/view?usp=sharing
Info: 👁️🗨️ 3D공간으로 요소를 배치하려면 3가지 속성을 적용해야한다
- Perspective
- Perspective origin
- Transform Z
◾ Perspective : 요소의 z축과 사용자의 거리를 길이로 표시
- **Perspective **값이 크면 멀어서 작게, 작으면 가까워서 크게보임. (값은 0보다 커야함)
- 사람의 시지각은 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 보인다.
◾ Perspective-origin: 시선의 위치
- 사용자의 시선 위치를 조정하여 소실점적용
**예제01**
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>3dtransform</title>
<link rel="stylesheet" href="css/style-0504.css">
</head>
<body>
<div>
<img src="https://placedog.net/300/300/" />
<span> 트랜스폼 알아보기 </span>
</div>
</body>
</html>
CSS
div{width:50%;margin:200px auto}
div img{
transition:all 0.35s;
}
div:hover img{
}
**예제02**
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>3dtransform</title>
<link rel="stylesheet" href="css/style-0505.css">
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotatex"></div>
</div>
<div class="origin">
<div id="rotatey"></div>
</div>
<div class="origin">
<div id="rotatez"></div>
</div>
<div class="origin">
<div id="rotatexyz"></div>
</div>
</div>
</body>
</html>
CSS
#container{
width:800px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */
}
**예제03**
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>연습문제 2</title>
<style>
#container {
width: 200px;
margin: 30px auto;
}
img {
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 5px 5px 30px 2px #000;
}
</style>
</head>
<body>
<div id="container">
<img src="https://placedog.net/200/200" alt="사진" />
</div>
</body>
</html>
CSS
#container{
width:800px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */
}
https://codepen.io/qwerewqwerew/pen/qBoLEBr
https://codepen.io/qwerewqwerew/pen/VwBwRrY
🟦 01-animation
animation-name: box; /* 애니메이션 이름 */
animation-duration: 2s; /* 애니메이션 지속시간 */
animation-timing-function: ease-in-out; /* 가속도 */
animation-delay:1s; /* 지연시간 */
animation-iteration-count:infinite; /* 반복횟수 infinite 무한반복 */
animation-play-state:paused;/* 재생상태 */
animation-play-state:running;
animation-direction:reverse;/* 재생방향 */
animation-direction:alternate;/* 재생방향 */
animation-fill-mode:forwards;/* backwards,both 정지상태 */
🔶 01-01-keyframs
🔶HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키프레임</title>
<link rel="stylesheet" href="./keyframes.css">
</head>
<body>
<div class="wrap">
<h3 class="counter"></h3>
<div class="box"></div>
</div>
</body>
</html>
🔶CSS
.wrap{
width: 300px;
height: 300px;
background-color: #f0f0f0;
border-radius: 30px;
margin: 0 auto;
position: relative;
}
.box::before{
content: '❤';
position: absolute;
left:100px;
top: 100px;
float: left;
color: pink;
font-size: 100px;
line-height: 1;
animation: heartbeat 1s 3 ease; /*심장 아이콘 애니메이션 반복 횟수(iterate)는 3회 */
}
.counter{/* 자바스크립트 이벤트 처리 메시지 출력 */
text-align: center;
color: pink;
}
/* 크기가 변하는 심장 아이콘 키프레임 애니메이션 */
@keyframes heartbeat {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1.0);
}
}
@keyframes heartbeat2 {
from {
transform: scale(1.0);
}
to {
transform: scale(1.3) translate(10px, 10px);
}
}
🔶 01-02 transition
🔶HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜스폼과 트랜지션</title>
<link rel="stylesheet" href="transition.css">
</head>
<body>
<div class="coloring">
<div class="box">변형<br/>요소</div>
</div>
</body>
</html>
🔶CSS
div.coloring{
background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);
background-color: #f0f0f0;
width: 300px;
height: 300px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
}
div.coloring:hover{
/* background-image: linear-gradient(45deg, rgba(0,0,255,1) 0%, rgba(0,9,121,255) 35%, rgba(255,212,0,1) 100%); */
}
div{
background-color: #fff;
}
div.box{
float: left;
width: 100px;
height: 100px;
background-color: #fff;
transform: translate(200px, 200px) rotate(360deg);
transition: all 1s ease 1s;
}
div.box2{
float: right;
width: 100px;
height: 100px;
transition: all 0.5s ease;
transform: scale(1.3) translate(-100px, 100px) rotate(180deg);
}
div.box3{
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
transform: scale(1.3) translate(100px, 100px) rotate(120deg);
transition: transform 2s ease;
}
div.box4{
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
animation: a 1s infinite alternate ease; /* 키프레임 애니메이션 적용 */
}
@keyframes a{
to{
transform: scale(1.3) translate(100px, 100px) rotate(120deg);
}
}
🟦 02-fillmode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
🔶HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>채우기모드의 이해</title>
<link rel="stylesheet" href="./fillmode.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
🔶CSS
.wrap{
/*background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
background-color: #f0f0f0;
width: 200px;
height: 200px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
background-color: #f0f0f0;
}
.box{
float: left;
width: 50px;
height: 50px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
background-color: darkgray;
animation: rotate 1s steps(5, end) 1 none;
}
@keyframes rotate{
from{
background-color: pink;
}
to{
background-color: lightblue;
transform: scale(1.3) translate(100px, 100px) rotate(360deg);
}
}
필모드 문법
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
🟦 02-animation-direction
애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
--------------------------------------------------------------------
normal
애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.
reverse
애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.
alternate
애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
alternate-reverse
애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
🟦 03-multi-animations
🔶HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 애니메이션</title>
<link rel="stylesheet" href="./multianimations.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
🔶CSS
.wrap{
/*background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
background-color: #f0f0f0;
width: 200px;
height: 200px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
background-color: #f0f0f0;
}
.box{
float: left;
width: 50px;
height: 50px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
background-color: darkgray;
animation: rotate 2s linear, scale 1s ease;
}
@keyframes rotate{
from{
background-color: pink;
}
to{
background-color: lightblue;
transform: translate(100px, 100px) rotate(360deg);
}
}
@keyframes scale{
to{
background-color: black;
transform: scale(1.3);
}
}
🔶HTML2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 애니메이션</title>
<link rel="stylesheet" href="./multianimations-caution.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
🔶CSS2
body{
padding-top: 100px;
}
.wrap{
/*background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
background-color: #f0f0f0;
width: 200px;
height: 200px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
background-color: #f0f0f0;
}
.box{
float: left;
width: 50px;
height: 50px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
background-color: darkred;
animation: rotate 2s linear backwards, scale 2s linear 1s forwards;
}
@keyframes rotate{
to{
background-color: lightblue;
transform: translate(100px, 100px) rotate(360deg);
}
}
@keyframes scale{
to{
background-color: black;
transform: scale(1.5);
}
}
🟦 04-변수 애니메이션
🔶01
▪️HTML-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수를 이용해 애니메이션 만들기1</title>
<link rel="stylesheet" href="./variable1.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
▪️CSS-1
.wrap{
width: 300px;
height: 300px;
border-radius: 30px;
margin: 0 auto;
position: relative;
}
.box{
left:100px;
top: 100px;
}
.box:nth-child(1){
--size: 1.6;
}
.box:nth-child(2){
--size: 1.5;
}
.box:nth-child(3){
--size: 2;
}
.box:nth-child(4){
--size: 2.8;
}
.box:nth-child(5){
--size: 1.3;
}
.box::before{
content: '❤';
position: absolute;
display: inline-block;
left: 100px;
top: 100px;
color: pink;
font-size: 75px;
line-height: 1;
animation: heartbeat 2s infinite ease;
}
@keyframes heartbeat {
to {
transform: scale(calc(var(--size)*2));
opacity: 0;
}
}
🟦 05-path-animation
🔶01
▪️html-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>경로 애니메이션1</title>
<link rel="stylesheet" href="pathanimation1.css">
</head>
<body>
<div class="coloring">
<div class="box"></div>
</div>
</body>
</html>
▪️css-1
div.coloring{
/*background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
background-color: #f0f0f0;
width: 300px;
height: 300px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
}
div.coloring:hover{
/* background-image: linear-gradient(45deg, rgba(0,0,255,1) 0%, rgba(0,9,121,255) 35%, rgba(255,212,0,1) 100%); */
}
div{
background-color: #fff;
}
div.box{
position: absolute;
left: 70px;
top: 70px;
width: 60px;
height: 60px;
background-color: #a00;
border: 5px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
border-radius: 35px;
animation: moveto 1s infinite alternate ease;
}
@keyframes moveto{
25% {
transform: translate(100px, 0px);
}
50%{
transform: translate(100px, 100px);
}
75%{
transform: translate(0px, 100px);
}
100%{
transform: translate(0px, 0px);
}
}
🔶02
▪️html-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>경로 애니메이션2</title>
<link rel="stylesheet" href="pathanimation2.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
▪️css-2
.wrap{
background-color: #f0f0f0;
width: 600px;
height: 200px;
}
.box{
position: absolute;
left: 70px;
top: 70px;
width: 60px;
height: 60px;
background-color: #a00;
border: 5px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
border-radius: 35px;
offset: path('M0,100c10,-50 82.095,-82.507 127.089,0c19.734,-79.314 119.195,-102.241 151.559,0c5.526,-77.735 101.322,-104.262 149.192,-52.888') auto;
animation: moveto 5s ease;
}
@keyframes moveto{
0%{
offset-distance: 0%
}
100%{
offset-distance: 100%;
}
}
🔶03
▪️html-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>경로 애니메이션3</title>
<link rel="stylesheet" href="pathanimation3.css">
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
▪️css-3
.wrap{
background-color: #f0f0f0;
width: 600px;
height: 200px;
}
.box{
position: absolute;
left: 70px;
top: 70px;
width: 60px;
height: 60px;
background-color: transparent;
offset: path('M0,100c10,-50 82.095,-82.507 127.089,0c19.734,-79.314 119.195,-102.241 151.559,0c5.526,-77.735 101.322,-104.262 149.192,-52.888') auto;
animation: moveto 5s ease;
}
.box::after{
content:url(./img/twitter_logo_original.svg);
display: block;
}
@keyframes moveto{
0%{
offset-distance: 0%
}
100%{
offset-distance: 100%;
}
}
🟦 06 썸네일호버1
🔶html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS3 애니메이션</title>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.prod-list {
list-style: none;
padding: 0;
}
.prod-list li {
float: left;
padding: 0;
margin: 10px;
overflow: hidden;
}
.prod-list img {
margin: 0;
padding: 0;
float: left;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="https://placedog.net/300/200?random" />
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="https://placedog.net/300/200?random" />
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="https://placedog.net/300/200?random" />
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html>
▪️css-1
div.coloring{
/*background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
background-color: #f0f0f0;
width: 300px;
height: 300px;
margin: 0 auto;
transition: background-image 1s ease;
position: relative;
}
div.coloring:hover{
/* background-image: linear-gradient(45deg, rgba(0,0,255,1) 0%, rgba(0,9,121,255) 35%, rgba(255,212,0,1) 100%); */
}
div{
background-color: #fff;
}
div.box{
position: absolute;
left: 70px;
top: 70px;
width: 60px;
height: 60px;
background-color: #a00;
border: 5px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
border-radius: 35px;
animation: moveto 1s infinite alternate ease;
}
@keyframes moveto{
25% {
transform: translate(100px, 0px);
}
50%{
transform: translate(100px, 100px);
}
75%{
transform: translate(0px, 100px);
}
100%{
transform: translate(0px, 0px);
}
}