Add a relatable css animation for the product

[mohit355]

No description provided.

[meghna750]

I would like to work on this

[mohit355]

Design sample

[mohit355]

@meghna750 any update

[24sristi]

i would like to work for it

[24sristi]

``/Body Properties
================================================/
body {
background: lightblue;
margin: 0;
padding: 0;
}

/Main body component
================================================/
.main {
margin: 40px auto;
width: 300px;
height: 300px;
border-radius: 152px;
border: 2px solid rgb(0,0,0);
background: rgb(255,255,255);
box-shadow: 0px -20px rgb(190,190,190) inset;
}

/Face component
================================================/
.face {
position: relative;
top: -20px;
left: 40px;
width: 220px;
height: 200px;
background: rgb(255,255,255);
border: 2px solid rgb(0,0,0);
border-radius: 112px / 102px;
box-shadow: 0px -12px rgb(190,190,190) inset;
}

/Foot component - the foot on the right is a box-shadow of the one on the left (any radius changes will affect the both feet)
================================================/
.foot {
position: relative;
top: 50px;
left: 50px;
width: 80px;
height: 60px;
border-radius: 30px 30px 8px 8px;
background: rgb(40,40,40);
/This box shadow is the foot on the right/
box-shadow: 120px 0px rgb(40,40,40);
}

/Nose component - the nostils belong to Eye Ball Right component (nostils are box-shadows of Eye Ball Right
================================================/
.nose {
position: relative;
top: -120px;
left: 90px;
width: 120px;
height: 60px;
border-radius: 62px / 32px;
border: 2px solid rgb(0,0,0);
background: rgb(254,192,203);
box-shadow: 0px -8px rgb(230,170,170) inset;
}

/Eye components - including Eye Left (inc animation), Eye Right, Eye Ball Left (inc animation) & Eye Ball Right
================================================/
.eye-left {
-webkit-animation: eye-looking 20s ease-in-out infinite;
-moz-animation: eye-looking 20s ease-in-out infinite;
animation: eye-looking 20s ease-in-out infinite;
position: relative;
top: -354px;
left: 76px;
width: 60px;
height: 60px;
border-radius: 34px;
background: transparent;
border: 4px solid rgb(0,0,0);
box-shadow: 0px 60px 0px -20px rgb(254,192,203) inset;
}

@-webkit-keyframes eye-looking {
5%{box-shadow: 0px 0px 0px -20px pink inset;}
23%{box-shadow: 0px 0px 0px -20px pink inset;}
30%{box-shadow: 0px 60px 0px -20px pink inset;}
}
@-moz-keyframes eye-looking {
5%{box-shadow: 0px 0px 0px -20px pink inset;}
23%{box-shadow: 0px 0px 0px -20px pink inset;}
30%{box-shadow: 0px 60px 0px -20px pink inset;}
}
@Keyframes eye-looking {
5%{box-shadow: 0px 0px 0px -20px pink inset;}
23%{box-shadow: 0px 0px 0px -20px pink inset;}
30%{box-shadow: 0px 60px 0px -20px pink inset;}
}

.eye-right {
position: relative;
top: -422px;
left: 156px;
width: 60px;
height: 60px;
border-radius: 34px;
background: transparent;
border: 4px solid rgb(0,0,0);
box-shadow: 0px 60px 0px -20px rgb(254,192,203) inset;
}

.eye-ball-left {
-webkit-animation: eye-ball-direction 20s ease-in-out infinite;
-moz-animation: eye-ball-direction 20s ease-in-out infinite;
animation: eye-ball-direction 20s ease-in-out infinite;
position: relative;
top: -220px;
left: 100px;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgb(0,0,0);
}

@-webkit-keyframes eye-ball-direction {
5%{-webkit-transform: translateY(-20px);}
10%{-webkit-transform: translateY(-20px) translateX(-20px);}
18%{-webkit-transform: translateY(-20px) translateX(20px);}
23%{-webkit-transform: translateY(-16px) translateX(0px);}
30%{-webkit-transform: translateY(0px);}
}

@-moz-keyframes eye-ball-direction {
5%{-moz-transform: translateY(-20px);}
10%{-moz-transform: translateY(-20px) translateX(-20px);}
18%{-moz-transform: translateY(-20px) translateX(20px);}
23%{-moz-transform: translateY(-16px) translateX(0px);}
30%{-moz-transform: translateY(0px);}
}

@Keyframes eye-ball-direction {
5%{transform: translateY(-20px);}
10%{transform: translateY(-20px) translateX(-20px);}
18%{transform: translateY(-20px) translateX(20px);}
23%{transform: translateY(-16px) translateX(0px);}
30%{transform: translateY(0px);}
}

.eye-ball-right {
position: relative;
top: -444px;
left: 180px;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgb(0,0,0);
/The box-shadow below are the two nostrils on the cow's nose/
box-shadow: -18px 60px rgb(0,0,0),
-58px 60px rgb(0,0,0);
}

/Ear components - both Ear Left & Ear Right
================================================/
.ear-left {
position: relative;
top: -340px;
width: 80px;
height: 30px;
border-radius: 42px / 17px;
border: 2px solid rgb(0,0,0);
background: rgb(255,255,255);
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
box-shadow: 0px -5px rgb(254,192,203) inset;
}

.ear-right {
position: relative;
top: -370px;
left: 220px;
width: 80px;
height: 30px;
border-radius: 42px / 17px;
border: 2px solid rgb(0,0,0);
background: rgb(255,255,255);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
box-shadow: 0px -5px rgb(254,192,203) inset;
}

/Hay component (inc animation)
================================================/
.hay {
-webkit-animation: chew-hay 2s ease-in-out infinite;
-moz-animation: chew-hay 2s ease-in-out infinite;
animation: chew-hay 2s ease-in-out infinite;
position: relative;
top: -72px;
left: 90px;
width: 160px;
height: 5px;
background: rgb(203,133,70);
box-shadow: 0px 4px 0px 0px rgb(253,164,40),
0px 8px 0px 0px rgb(203,133,70),
0px 12px 0px 0px rgb(253,164,40);
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg);
}

@-webkit-keyframes chew-hay {
50%{-webkit-transform: rotate(-15deg);}
100%{-webkit-transform: rotate(-25deg);}
}

@-moz-keyframes chew-hay {
50%{-moz-transform: rotate(-15deg);}
100%{-moz-transform: rotate(-25deg);}
}

@Keyframes chew-hay {
50%{transform: rotate(-15deg);}
100%{transform: rotate(-25deg);}
}
`

[24sristi]

please check

[mohit355]

Ok I will inform you tommorow

[mohit355]

Please upload some SnapShots.

[mohit355]

@24sristi

[pallavithakare28]

@mohit355 May I work on this issue?

[mohit355]

@pallavithakare28 yes you can but before that check the above code.

[pallavithakare28]

@mohit355 Yes Sure. and will make a PR soon. Thank you for assigning. :)

[24sristi]

@mohit355

[mohit355]

@24sristi create some transition in it.I can send you an example for that

[mohit355]

If you want

[24sristi]

@mohit355 I have created transitions. check the code once.

[mohit355]

@24sristi create a PR of this by adding this in homepage