how to make two animated squares in css(with @keyframe) | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

how to make two animated squares in css(with @keyframe)

im cant make a two squares with @keyframes colorchange{}

1st Mar 2021, 3:32 PM
4maks1m
4maks1m - avatar
10 Answers
+ 1
Can you show us your code?
1st Mar 2021, 3:47 PM
Abhay
Abhay - avatar
0
are you talking about this code of yours? https://code.sololearn.com/W76MosjTwfz4/?ref=app if so, your animation is working, but as the div is empty and block element, width and height have no effect ^^ you should use css property position:relative; to let dimension it ;)
1st Mar 2021, 4:14 PM
visph
visph - avatar
1st Mar 2021, 6:35 PM
4maks1m
4maks1m - avatar
0
the div (with class 'one') wich has animation defined works fine... what are you trying to achieve wich not work?
1st Mar 2021, 6:39 PM
visph
visph - avatar
0
visph I'm trying to make each square change its color
1st Mar 2021, 6:42 PM
4maks1m
4maks1m - avatar
0
you should define one keyframes rule for each, and link them by their name to animation property of each div...
1st Mar 2021, 6:45 PM
visph
visph - avatar
0
and that is, there will all the squares overflow?
1st Mar 2021, 6:48 PM
4maks1m
4maks1m - avatar
0
did you mean above each other (intersect) by 'overflow'? if so, that should be your choice: if you want you can, and if not, you can also...
1st Mar 2021, 6:50 PM
visph
visph - avatar
0
oh, thx
1st Mar 2021, 6:52 PM
4maks1m
4maks1m - avatar