Can someone help me with basic keyframe animation in CSS? Every time I try it's not working.

Question

I can get it to rotate and stuff without the keyframe code but with it nothing works for me, Now I don't think it's an error because everyone else code works but mine isn't even with YouTube tutorials so I know I didn't forget any semicolon or anything, Can someone help?

Answer 1

Rondell Nagassar

I looked at your code bit

you were putting the css inside body{}. don't do this. it's wrong.

body { <-- delete this line ❌
div {
position: absolute; /* the element must be movable */
width: 100px;
height: 100px;
background: #333;
animation: move 1s infinite; /* animation to use */
}

@keyframes move {
/* moving */
from { top: 0px; }
to { top: 100px; }

/* changing color */
0% { background: #FFF;}
50% { background: #777;}
100% {background: #333;}
}
} <-- delete this, too ❌

Answer 2

post your code so we can find where the problem is.

Answer 3

https://sololearn.com/compiler-playground/W4vTlHgLZ1ag/?ref=app

this is a very basic set up of keyframes to compare with your work

Answer 4

I'm leaving this discussion for other people to learn from, But everyone else, I got it now. A tip is don't do the keyframes code inside of the "Body{}" of CSS and don't have spaces next to this example.

To{transform:translate (100px);} - INCORRECT!!!

To{transform:translate(100px);} - CORRECT!!!

Notice the space by "translate" code with the brackets/parenthesis don't do that. But hopefully someone learns from this.

Answer 5

Thank you so much! I'll try it now!

Answer 6

I have the "<div></div> in the HTML section and the code from a helper which is working on her code playground but not mine, It's this

CSS

div {
position: absolute; /* the element must be movable */
width: 100px;
height: 100px;
background: #333;
animation: move 1s infinite; /* animation to use */
}

@keyframes move {
/* moving */
from { top: 0px; }
to { top: 100px; }

/* changing color */
0% { background: #FFF;}
50% { background: #777;}
100% {background: #333;}
}

Answer 7

The most common issues are missing or incorrect animation shorthand properties (especially animation-name and animation-duration), an improperly defined @keyframes rule (mismatched name or incorrect structure), applying the animation to the wrong element, or conflicting CSS styles. To troubleshoot, provide your code, use your browser's developer https://www-prepaidcardstatus.com tools to inspect the element and its applied styles (checking the "Animations" tab if available), and try a very simple keyframe animation example to isolate the problem.

Answer 8

I tried the code and it's not moving, I even copied and pasted it and it's not moving