I don't know what's wrong with the animation. Please help!!!

Question

https://code.sololearn.com/cbrV6Opbyq3a/?ref=app

Answer 1

/* Have a look at the example and my comments: */

.active-day{
color:#00cc00;
animation-name:pulse;
animation-duration:2s;
animation-iteration-count:infinite; /* typo */
}
@keyframes pulse {
0% {font-size: 100%;}
100% {font-size:120%;} /* change font-size */
}

/*
How is the color to change to #00cc00 when it already has that color? Are you referring to the opacity?
*/

Answer 2

/*animate .active-day name it pulse, duration 2s , repeat infinte times and make the color change to #00cc00 at 50% and make test size oscillate between 100% to 120% what's wrong with this code? */

.active-day
{color:#00cc00;
animation-name:pulse;
animation-duration:2s;
animation-iteration-count:infinte;
}
@keyframes pulse {
50%{color:#00cc00;}
100%{roate(45deg);}
120%{rotate(-45deg);}
}

Answer 3

I'm sorry for any confusion, but I'm unable to view or interact with visual elements like animations. If you're experiencing an issue with an animation on your webpage, I recommend checking the following:Check Your CSS and JavaScript: Make sure that any CSS or JavaScript code related to the animation is written correctly and that there are no syntax errors.Ensure Necessary Libraries: If you're using any external libraries for animations, ensure they are properly linked in your HTML file and are compatible with the elements you're trying to animate.Browser Compatibility: Different browsers may interpret animations slightly differently. Make sure your animation is compatible with the browsers you're targeting.Inspect Element: Use your browser's developer tools to inspect the element that's supposed to be animated. Look for any error messages or warnings related to the animation.Check for Conflicts: Make sure there are no conflicting styles or scripts that might interfere with the animation.File Paths: Double-ch

Answer 4

Lisa 😄✌️, well done . very good truth

Answer 5

Tanisha Parmar
We all make mistakes, don't worry..😁

Answer 6

DONFY 😊😊

Answer 7

Lisa It's the initial color and #00cc00 is the final color

Answer 8

Lisa it's working now thank you so much for the help😊🙏

Answer 9

Lisa I think I now know where I was wrong 🤦🏻‍♀️

Answer 10

রহস্যময়— পৃথিবী Thank you so much for the help 🙏I'll keep the instructions you stated in mind when using animation in the future 😊

Answer 11

We are changing two properties: font-size and color

Whatever color you have given your active class, that is the initial color. So if you have red, that is the color that should be at the FROM mark. And the font-size is at 100%.

It tells you to take the code from 100% to 120% and back to 100%.

At the 0% mark the font-size is at 100% and your color is at whatever you have set it for in the .active class. (I set mine to red).
At the 50% mark, the color should change color to #00CC00. The 50% mark changes the color to #00CC00 and the font goes to 120%.
At the 100% mark, the color goes back to red, and the font-size goes back down to 100%. Its an infinite loop, so you get what happens. The code is as follows.

*Do not trust the Ai that helps you or gives you hints. It doesn't work, and it only creates more confusion. As well, the task says:

Use @keyframes for the pulse animation to make the text size change FROM 100% and 120% and back again, and change the color to #00CC00 at the 50% mark of the animation. Its telling you to use FROM and TO. This assignment sucked because it never prepared us for working with a situation (new to us) where we use the FROM and TO where there is a 50% mark. I know I didn't know about it, so it took me a while to get to eat through research.

We must remember that these are are animations NOT transformations or translations.

@keyframes pulse {

from {font-size: 100%;
color: red;}

50% {font-size: 120%;
color: #00CC00;}

to {font-size: 100%;
color: red; }
}