CSS Shapes with Animation

You can do wonders with simple CSS properties in the designing world.for example you can create a simple arrow symbol or heart with beating. So let's learn how to create different shapes in CSS and add animation property to shapes that are created.

Circle

To create a circle, we have to first create div element and assign width and height CSS property. Add some background color and make border-radius 50%.

.circle{
   width:100x;
   height:100px;
   background:#159AC1;
   border-radius:50%; 
}

Rectangle

To create a rectangle, We have to create a div element and assign width and height CSS property. Add some background color to make more clearly visible.

.rectangle{
   width:100x;
   height:50px;
   background:#159AC1;
}

Triangle

To create a triangle shape, we have to user border property as with position: absolute. See the CSS code below.

.triangle-up{
    position: absolute;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 20px solid tomato;
}

.triangle-down{
    position: absolute;
    border-top:20px solid tomato;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
}

.triangle-right{
    position:absolute;
    border-right:20px solid tomato;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
}

.triangle-left{
    position: absolute;
    border-left: 20px solid tomato;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

Quarter Moon

To create the quarter moon, First, create circle white background and apply box-shadow

.quarter-moon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 10px 10px 0 0 pink;
}

Heart

To create a heart shape, We should use pseudo-class before and after. We used scale rotate & scale transform properties in animation keyframe to show heartbeat

.heart{
        position: relative;
    }

.heart:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 75px;
    left: 0px;
    border-radius: 50px 50px 0 0;
    background: pink;
    transform: rotate(-45deg);
    animation: heart-pump 1s infinite;
}

.heart:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 75px;
    left: 20px;
    border-radius: 50px 50px 0 0;
    background: pink;
    transform: rotate(45deg);
    animation: heart-pump-1 1s infinite;
}

Adding heart-beat animation

@keyframes heart-pump {
    to {
        transform: rotate(-45deg) scale(1.2);
    }
}

@keyframes heart-pump-1 {
    to {
        transform: rotate(45deg) scale(1.2);
    }
}