How to CSS Animate [closed] - css

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I've made a mustache, I'll send a picture below, and I'm trying to animate it to give it a bit more life. But, for some reason this animate from css doesn't work... I'm not sure what I'm doing wrong.
This may be an outdated form of CSS? Or, maybe there's something I misspelled that I missed to check?
.mustache {
width: 180px;
height: 180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor
}
.mustache::before {
animation: shakeLeft 1s ease-in-out infinte;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
.mustache:before {
animation: shakeLeft 1s ease-in-out infinte;
}
.mustache:after {
animation: shakeRight 1s ease-in-out infinte;
}
<div class="mustache">
</div>
Any help/comment is appreciated. Thank you!

Answer 1

You had a slight typo... You misspelled infinite. If you fix that, the code runs.
I also changed the shakeRight keyframe to have positive values to make it symmetrical.
.mustache {
width: 180px;
height: 180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor
}
.mustache::before {
animation: shakeLeft 1s ease-in-out infinite;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
animation: shakeRight 1s ease-in-out infinite;
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
<div class="mustache" />

Answer 2

You have to do some changes in your css >>>
Try with this Your animation is perfectly working now
Here's your HTML:
<div class="mustache"></div>
Here's your Edited CSS:
<style type="text/css">
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
.mustache {
width:180px;
height:180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow:
150px 240px 0 0 currentColor,
300px 240px 0 0 currentColor
}
.mustache::before {
animation-name: shakeLeft;
animation-duration: 4.5s;
animation-delay: 1.5s;
animation-iteration-count: infinite;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
animation-name: shakeRight;
animation-duration: 4.5s;
animation-delay: 1.5s;
animation-iteration-count: infinite;
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
</style>