CSS3 HandsOn - Morphing Div-- Create a Morphing div as shown in above image HackerRank Solutions Fresco Play T facter 1

 Question: Morphing Div-- Create a Morphing div as shown in above imag

Create a Morphing div as shown in above image.

A div starts like a square and morphs to become a circle while changing colors.

-Use css animations, name the animation as 'colorchange' and with a duration of 5 seconds and the animation should run infinitely

-Split the animation intervals into 5

- The order of change in colors is as follows:

Red, Yellow, Blue, Green and again Red

Ans:

Style.css

#shape {

height: 300px;

width: 300px;

background: tomato;

margin: autoautoautoauto;

border: 1px solidblack;

animation:colorchange 5s infinite;

}

@keyframes colorchange {

0% {

background: red;

}

25% {

background: yellow;

}

50% {

background: blue;

}

75% {

background: green;

}

100% {

background: red;

}

0% {

border-radius: 0% 0% 0% 0%;

}

25% {

background: yellow;

border-radius: 25% 25% 25% 25%;

}

50% {

background: blue;

border-radius: 50% 50% 50% 50%;

}

75% {

background: green;

border-radius: 75% 75% 75% 75%;

}

100% {

background: red;

border-radius: 100% 100% 100% 100%;

}

}

html {

width: 100%;

height: 100%;

display: flex;

}

body {

display: flex;

margin: auto auto auto auto;

}

Click on image: