Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a submarine animation. For this, we need HTML and CSS. We will be first creating a submarine illustration using CSS shapes and then animating it using CSS keyframes.
CSS animations and CSS art are fun ways to practice and improve your CSS skills. I have a whole playlist of CSS animation tutorials if you need some more of them for learning.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you would prefer learning by watching the video and coding along, you can check out the video below.
Project Folder Structure:
Let us take a quick look at the project folder structure. The project folder structure – Submarine Animation has two files inside of it. The first one is index.html which is an HTML document while the second one is style.css which is a stylesheet.
HTML:
We start with the HTML code. Copy the code below and paste it into your HTML document.
The HTML file consists of two main divs – submarine and wave. First, let us take a look at the submarine div. It consists of a top div inside which we have a pipe div. The pipe div further consists of light.
Next, we have two window divs. Each of them includes a shine div. Following windows, we have a shadow. Now comes the propeller div which consists of back, wing and three bubble divs.
Lastly, inside wave, we have two divs namely – wave1 and wave2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Submarine Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="submarine">
<div class="top">
<div class="pipe">
<div class="light"></div>
</div>
</div>
<div class="window window-1">
<div class="shine"></div>
</div>
<div class="window window-2">
<div class="shine"></div>
</div>
<div class="shadow"></div>
<div class="propeller">
<div class="back"></div>
<div class="wing"></div>
<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
</div>
</div>
<div class="wave">
<div class="wave1"></div>
<div class="wave2"></div>
</div>
</body>
</html>
CSS:
Now we shape these elements to look like a submarine using CSS. Copy the code below and paste it into your stylesheet.
We start by removing the paddings and margins from the body element followed by applying ‘#000065 ‘ as the background color.
Next, we style the submarine by setting dimensions and adding a border-radius to give it a capsule shape. We use the before pseudo-element to create a shine effect on the submarine. To create a similar shine effect again, we make use of the after pseudo-element.
Next, we create the top of the submarine using top, top::before and top::after. These styles are self-explanatory. In a similar manner, we create a pipe on the top of the submarine. The light is created by creating a trapezoid shape and then setting the opacity to 0.15.
Both the windows are shaped in a circle by setting a border-radius of 50% to them.
A shining effect is created by shaping the div into a rectangle and then rotating it by 135 deg. To finish off the shine effect we add a keyframe called shine-move that move the shine div from bottom left to top right.
We add a perspective to the propeller and then add spin animation to wings. This gives a 3D effect to the rotation of the wings.
Now we add animation to all the bubble div. These animation keyframes make them look like they are floating around until they finally disappear. We achieve this using transforms and opacity property.
Lastly, we create two waves using the radial-gradient. Again using animation property we make the waves move towards the right. This creates an effect by which the submarine appears to be moving left i.e forwards. The submarine animation is now ready.
body {
padding: 0;
margin: 0;
background-color: #000065;
}
.submarine {
background-color: #dd0e49;
height: 80px;
width: 200px;
border-radius: 80px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.submarine:before {
content: "";
position: absolute;
height: 5px;
width: 80px;
background-color: #ee689e;
border-radius: 5px;
top: 7px;
left: 28px;
}
.submarine:after {
position: absolute;
content: "";
height: 15px;
width: 15px;
border: 5px solid transparent;
border-right: 5px solid #ee689e;
border-radius: 50%;
transform: rotate(45deg);
bottom: 10px;
right: 14px;
}
.top {
height: 0;
width: 65px;
border-bottom: 25px solid #dd0e49;
border-right: 18px solid transparent;
position: relative;
bottom: 25px;
left: 50px;
}
.top:before {
position: absolute;
content: "";
height: 0;
width: 81px;
border-bottom: 3px solid #a30036;
border-right: 2px solid transparent;
top: 22px;
}
.top:after {
position: absolute;
content: "";
height: 3px;
width: 30px;
background-color: #ee689e;
border-radius: 30px;
right: 5px;
top: 5px;
}
.pipe {
height: 17px;
width: 10px;
border-right: 5px solid #dd0e49;
border-top: 5px solid #dd0e49;
border-radius: 0 5px 0 0;
position: relative;
bottom: 22px;
left: 4px;
}
.pipe:before {
position: absolute;
content: "";
height: 2px;
width: 5px;
background-color: #a30036;
top: 15px;
left: 10px;
}
.pipe:after {
position: absolute;
content: "";
height: 8px;
width: 4px;
background-color: #f8d02e;
bottom: 16px;
}
.light {
height: 5px;
width: 0;
border-left: 115px solid #ffffff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
position: relative;
right: 115px;
bottom: 28px;
opacity: 0.15;
}
.window {
height: 20px;
width: 20px;
background-color: #2adab7;
border: 4px solid #a30036;
border-radius: 50%;
position: absolute;
overflow: hidden;
}
.window-1 {
left: 20px;
}
.window-2 {
left: 65px;
}
.shine {
height: 35px;
width: 4px;
background-color: #ffffff;
transform: rotate(135deg);
position: relative;
top: 2px;
right: 2px;
animation: shine-move 2s infinite;
}
@keyframes shine-move {
100% {
transform: rotate(135deg) translate(-30px);
}
}
.shadow {
height: 7px;
width: 60px;
background-color: #a30036;
border-radius: 60px;
position: relative;
top: 9px;
left: 100px;
}
.propeller {
perspective: 1200px;
}
.back {
height: 20px;
width: 5px;
background-color: #a30036;
position: relative;
left: 198px;
}
.wing {
background-color: #f8d02e;
height: 30px;
width: 17px;
transform-style: preserve-3d;
position: relative;
bottom: 25px;
left: 202px;
animation: spin 0.5s infinite linear;
}
@keyframes spin {
100% {
transform: rotateX(180deg);
}
}
.bubble {
background-color: #ffffff;
height: 12px;
width: 12px;
border-radius: 50%;
position: absolute;
left: 200px;
bottom: 35px;
opacity: 0.4;
}
.bubble-1 {
animation: bubble-move-1 3s 2s infinite;
}
@keyframes bubble-move-1 {
100% {
transform: translate(50px, -20px);
opacity: 0;
}
}
.bubble-2 {
animation: bubble-move-2 3s 0.5s infinite;
}
@keyframes bubble-move-2 {
100% {
transform: translate(30px, -20px);
opacity: 0;
}
}
.bubble-3 {
animation: bubble-move-3 4s 1s infinite;
}
@keyframes bubble-move-3 {
100% {
transform: translateX(50px);
opacity: 0;
}
}
.wave {
height: 100px;
width: 100vw;
position: absolute;
bottom: 0;
overflow: hidden;
}
.wave1,
.wave2 {
position: absolute;
bottom: 0;
right: 0;
width: 5000px;
height: 100px;
background-size: 100px 180px;
animation: wave-move 20s linear infinite;
}
.wave1 {
background-image: radial-gradient(
circle at 50px 120px,
rgba(0, 0, 0, 0.2) 60px,
#000065 60px
);
}
.wave2 {
background-image: radial-gradient(
circle at 50px 85px,
rgba(0, 0, 0, 0.2) 60px,
#000065 60px
);
background-position: 55px 0;
}
@keyframes wave-move {
100% {
right: -100%;
}
}
If you have any problems while creating this animation you can download the source code by clicking on the download code button below. Also please comment below your suggestions and feedbacks.
Good Design, Thank you
dsaffdsa