Making CSS animations

Hi, VatsaDev here, my first blog post! Today I'll give you the best ways to create your own vector images and animations, in CSS.

whats the cool activities

• Creating a shaped ghost and animating it up!

Basic shapes

the basic shapes would be

• squares and rectangles
• circles and ovals
• Beans
• lines
• triangles

Colors

Shapes need colors, we'll be doing

• solid colors
• stripes
• linear gradients
• radial gradients
• conic gradients

so lets get started 😺!

squares and rectangles

squares and rectangles are the easiest shapes, they only use width and height.

we can set them like this:

.square {
  width: 100px;
  height: 100px;
  background-color: black;
}

this will make a black square. Now while you've probably already understood the rectangle code, i'll give it below.

.rect-wide {
  width: 500px;
  height: 100px;
  background-color: red;
}

.rect-tall {
  width: 100px;
  height: 500px;
  background-color: green;
}

Circles and ovals

these are pretty simple, all you need is

border-radius: 50%;

for example, a black circle:

.circle {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 50%;
}

ovals:

.oval-wide {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.oval-tall {
  width: 100px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

beans

I like calling them beans for fun, but they're known as rounded rectangles

here we just take a rectangle and set the property

border-radius: 50px;

here, 50% sets the shape fully round, with other values making the shape partially rounded.

lines

for horizontal lines you style the <hr /> element like this:

hr {
  height: 10px;
  background-color: black;
}

this will make a horizontal line 10px tall

for vertical lines we can make the .vl class as:

.vl {
  width: 1px;
  height: 10px; /*make this how tall you want the line to be*/
  border-right: 1px solid black; /*make this how wide you want the line to be*/
}

Triangles

we can make triangles with the border property

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

colors

• solid: color: #000000
• stripes: background-image: linear-gradient(45deg, #EE617D 25%, #3D6F8E 25%, #3D6F8E 50%, #EE617D 50%, #EE617D 75%, #3D6F8E 75%, #3D6F8E 100%);
• linear: background: linear-gradient(#e66465, #9198e5);
• radial: background-image: radial-gradient(green, salmon);
• conic: background: conic-gradient(black, white);

the ghost

here's the ghost I said we would make!

code:

body {
  margin: 0;
  padding: 0;
  background-color: #2c3a47;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghost {
  width: 140px;
  height: 160px;
  background-color: #f2f2f2;
  border-radius: 70px 70px 0 0;
  position: relative;
  cursor: pointer;
  animation: floating 2s infinite ease-in-out;
  box-shadow: 20px 20px 50px 10px #121212;
}

@keyframes floating {
  50% {
    transform: translateY(-50px);
  }
}

.face {
  width: 100px;
  position: absolute;
  top: 60px;
  left: calc(50% - 50px);
}

.eyes {
  height: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 14px;
}

.eyes span {
  width: 24px;
  height: 24px;
  background-color: #2c3a47;
  border-radius: 50%;
  transition: 0.3s linear;
}

.ghost:hover .eyes span {
  height: 26px;
}

.mouth {
  width: 40px;
  height: 20px;
  background-color: #2c3a47;
  margin: auto;
  border-radius: 0 0 20px 20px;
  transition: 0.3s linear;
}

.ghost:hover .mouth {
  height: 30px;
}

.hands {
  width: 180px;
  position: absolute;
  left: -20px;
  top: 80px;
  display: flex;
  justify-content: space-between;
}

.hands span {
  width: 20px;
  height: 30px;
  background-color: #f2f2f2;
}

.hands span:first-child {
  border-radius: 20px 0 0 20px;
}

.hands span:last-child {
  border-radius: 0 20px 20px 0;
}

.feet {
  position: absolute;
  width: 100%;
  bottom: -20px;
  display: flex;
}

.feet span {
  flex: 1;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 0 0 20px 20px;
}

.feet span:first-child {
  border-radius: 0 0 20px 12px;
}

.feet span:last-child {
  border-radius: 0 0 12px 20px;
}

html

<div class="ghost">
  <div class="face">
    <div class="eyes"><span></span><span></span></div>
    <div class="mouth"></div>
  </div>

  <div class="hands"><span></span><span></span></div>

  <div class="feet">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Codepen demo:

Photo by Sai Kiran Anagani on Unsplash