Posted onSep 15, 2019

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);    }}