CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.
사용프로그램
codepen GO
CSS Reference GO
CSS Animation GO
JS Animation GO
Parallax Animation GO
Codepen Webstoryboy GO
인스타그램 보기 GO
포폴 만들기 스터디 모임 GO
웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공
+ 웹디자인 기능사 GO
+ CSS Animation GO
+ Parallax GO
+ Image Slider GO
기본 애니메이션
Basic01 Bar Animation GO
Basic02 Dot Animation GO
Basic03 Wave Animation GO
Basic04 Cube Animation GO
Basic05 Tail Animation GO
HoverEffect01 Animation GO
HoverEffect02 Animation GO
HoverEffect03 Animation GO
HoverEffect04 Animation GO
HoverEffect05 Animation GO
Motion01 Tentacle Animation GO
Motion02 Minion Animation GO
Motion03 Rock Animation GO
Motion04 Rocket Animation GO
Motion05 Rocket(tween) Animation GO
<div class="jelly-container">
<div class="bubble-1"></div>
<div class="bubble-2"></div>
<div class="bubble-3"></div>
<div class="bubble-4"></div>
<div class="bubble-5"></div>
<div class="bubble-6"></div>
<div class="bubble-7"></div>
<div class="bubble-8"></div>
<div class="bubble-9"></div>
<div class="bubble-10"></div>
<div class="jelly-wrapper">
<div class="jelly-hair"></div>
<div class="jelly-body">
<div class="jelly-inner">
<div class="jelly-eye"></div>
<div class="jelly-mouth"></div>
<div class="jelly-hands"></div>
</div>
</div>
<div class="jelly-tentacle-1"></div>
<div class="jelly-tentacle-2"></div>
<div class="jelly-tentacle-3"></div>
<div class="jelly-tentacle-4"></div>
<div class="jelly-tentacle-5"></div>
</div>
<div class="bubble-11"></div>
<div class="bubble-12"></div>
<div class="bubble-13"></div>
<div class="bubble-14"></div>
<div class="bubble-15"></div>
<div class="bubble-16"></div>
<div class="bubble-17"></div>
<div class="bubble-18"></div>
<div class="bubble-19"></div>
<div class="bubble-20"></div>
</div>
.jelly-container {
width: 100vw; height:100vh;
overflow: hidden;
background: linear-gradient(to bottom, rgba(1,141,210,0.63), transparent);
}
div[class^="bubble-"]{
width: 75px; height: 75px; background-color: rgba(0, 141, 210, 0.3);
border-radius: 50%; position: absolute; bottom: 6px;
}
div[class^="bubble-"]:after {
content: ''; border-top: 1px solid rgba(255,255,255,0.63);
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 85%; height: 85%; border-radius: 50%;
}
.bubble-1 {left: 20%; animation: bubble-movement 4s -0.4s ease-in infinite;}
.bubble-2 {left: 80%; animation: bubble-movement 4s -0.6s ease-in infinite;}
.bubble-3 {left: 75%; animation: bubble-movement 4s -0.9s ease-in infinite;}
.bubble-4 {left: 50%; animation: bubble-movement 4s -1.9s ease-in infinite;}
.bubble-5 {left: 66%; animation: bubble-movement 4s -1.4s ease-in infinite;}
.bubble-6 {left: 70%; animation: bubble-movement 4s -3.5s ease-in infinite;}
.bubble-7 {left: 85%; animation: bubble-movement 4s -0.2s ease-in infinite;}
.bubble-8 {left: 90%; animation: bubble-movement 4s -1.1s ease-in infinite;}
.bubble-9 {left: 26%; animation: bubble-movement 4s -1.4s ease-in infinite;}
.bubble-10 {left: 56%; animation: bubble-movement 4s -3.6s ease-in infinite;}
.bubble-11 {left: 90%; animation: bubble-movement 4s -1.4s ease-in infinite;}
.bubble-12 {left: 25%; animation: bubble-movement 4s -2.9s ease-in infinite;}
.bubble-13 {left: 60%; animation: bubble-movement 4s -0.9s ease-in infinite;}
.bubble-14 {left: 28%; animation: bubble-movement 4s -1.1s ease-in infinite;}
.bubble-15 {left: 58%; animation: bubble-movement 4s -0.2s ease-in infinite;}
.bubble-16 {left: 80%; animation: bubble-movement 4s -2.1s ease-in infinite;}
.bubble-17 {left: 27%; animation: bubble-movement 4s -1.9s ease-in infinite;}
.bubble-18 {left: 58%; animation: bubble-movement 4s -2.3s ease-in infinite;}
.bubble-19 {left: 43%; animation: bubble-movement 4s -1.9s ease-in infinite;}
.bubble-20 {left: 25%; animation: bubble-movement 4s -0.9s ease-in infinite;}
@keyframes bubble-movement {
0% {width: 1px; height: 1px; transform: translatey(0);}
100% {width: 75px; height: 75px; transform: translatey(-1000%);}
}
.jelly-wrapper {
width: 256px; height: 300px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%);
animation: jelly-movement 10s infinite linear;
}
@keyframes jelly-movement {
0% {top: 55%; left: 50%;}
5% {top: 50%;}
10% {top: 55%;}
15% {top: 50%;}
20% {top: 55%;}
25% {top: 50%; left: calc(100% - 150px);}
30% {top: 55%;}
35% {top: 50%;}
40% {top: 55%;}
45% {top: 50%;}
50% {top: 55%; left: 50%;}
55% {top: 50%;}
60% {top: 55%;}
65% {top: 50%;}
70% {top: 55%;}
75% {top: 50%; left: 150px;}
80% {top: 55%;}
85% {top: 50%;}
90% {top: 55%;}
95% {top: 50%;}
100%{top: 55%; left: 50%;}
}
.jelly-hair {
width: 100px; height: 75px;
background: linear-gradient(to bottom, #ef891a, #ebf28a);
position: absolute; left: 30%; top: -10px;
border-radius: 25px;
z-index: -1;
animation: hair 10s infinite linear;
}
@keyframes hair {
0% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
20% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
25% {transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,75deg);}
30% {transform: rotate3d(0,1,0,0deg) rotate3d(0,0,1,75deg);}
70% {transform: rotate3d(0,1,0,0deg) rotate3d(0,0,1,75deg);}
75% {transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,75deg);}
80% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
100%{transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
}
.jelly-body {
width: 100%; height: 250px;
background: linear-gradient(to bottom, #009dd2, #ebf28a);
border-top-left-radius: 70px;
border-top-right-radius: 90px;
overflow: hidden;
position: relative;
z-index: 1;
animation: head-movement 10s infinite linear;
}
@keyframes head-movement {
0% {
border-top-left-radius: 70px;
border-top-right-radius: 90px;
}
20% {
border-top-left-radius: 70px;
border-top-right-radius: 90px;
}
25% {
border-top-left-radius: 80px;
border-top-right-radius: 80px;
}
30% {
border-top-left-radius: 90px;
border-top-right-radius: 70px;
}
70% {
border-top-left-radius: 90px;
border-top-right-radius: 70px;
}
75% {
border-top-left-radius: 80px;
border-top-right-radius: 80px;
}
80% {
border-top-left-radius: 70px;
border-top-right-radius: 90px;
}
100% {
border-top-left-radius: 70px;
border-top-right-radius: 90px;
}
}
.jelly-inner {
width: 50%; height: 200px;
position: absolute; left: 50%; top: 35%;
animation: move 10s infinite linear;
}
@keyframes move {
0% {left: 60%;}
20% {left: 60%;}
25% {left: 50%;}
30% {left: 40%;}
70% {left: 40%;}
75% {left: 50%;}
80% {left: 60%;}
100% {left: 60%;}
}
.jelly-eye {
position: absolute; top: -40px;
}
.jelly-eye:before {
content:'';
position: absolute; left: 60px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
}
.jelly-eye:after {
content:'';
position: absolute; left: -60px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
animation: eyes-blick 3.5s infinite linear;
}
@keyframes eyes-blick {
0% {height: 20px;}
2% {height: 1px;}
4% {height: 20px;}
100% {height: 20px;}
}
.jelly-mouth {
position: absolute;
width: 200px; height: 80px;
background-color: #f4cfd1;
border-radius: 30px;
transform: translatex(-50%);
}
.jelly-mouth:after {
content:'';
position: absolute; left: 50%; top: 50%;
width: 60%; height: 1px;
background: #ff9393;
transform: translatex(-50%);
}
.jelly-hands {position: absolute; top: 65px;}
.jelly-hands:before {
content:'';
width: 45px; height: 50px;
box-shadow: 0px 5px 6px #3b949b;
position: absolute; left: 105px;
border-radius: 0 0 50% 50%;
}
.jelly-hands:after {
content:'';
width: 45px; height: 50px;
box-shadow: 0px 5px 6px #3b949b;
position: absolute; left: -150px;
border-radius: 0 0 50% 50%;
}
.jelly-tentacle-1 {
width: 50px; height: 50px;
background: #ebf28a;
border-radius: 0 0 50% 50%;
position: absolute; left: 0;
box-shadow: 0 2.5px 0 #008d98;
animation: tentacle 1s infinite ease-in;
}
.jelly-tentacle-2 {
width: 50px; height: 50px;
background: #ebf28a;
border-radius: 0 0 50% 50%;
position: absolute; left: 20%;
box-shadow: 0 2.5px 0 #008d98;
animation: tentacle 1s infinite ease-in -0.7s;
}
.jelly-tentacle-3 {
width: 50px; height: 50px;
background: #ebf28a;
border-radius: 0 0 50% 50%;
position: absolute; left: 40%;
box-shadow: 0 2.5px 0 #008d98;
animation: tentacle 1s infinite ease-in -0.2s;
}
.jelly-tentacle-4 {
width: 50px; height: 50px;
background: #ebf28a;
border-radius: 0 0 50% 50%;
position: absolute; left: 60%;
box-shadow: 0 2.5px 0 #008d98;
animation: tentacle 1s infinite ease-in -0.5s;
}
.jelly-tentacle-5 {
width: 50px; height: 50px;
background: #ebf28a;
border-radius: 0 0 50% 50%;
position: absolute; left: 80%;
box-shadow: 0 2.5px 0 #008d98;
animation: tentacle 1s infinite ease-in -0.4s;
}
@keyframes tentacle {
0% {bottom: 0%;}
50% {bottom: 8%;}
100% {bottom: 0%;}
}
