Skip to main content
Main Content

Need CSS code help with keyframes!

Need CSS code help with keyframes!
Posted 2024-11-26 11:02:51
#1353491
So for context, I'm making a CSS style sheet and I ran into a problem. I'm using @keyframes (CSS animations) to change the colours of elements over a certain amount of time, like

@keyframes sidebarcards {

0% {background-color: #red;}
50% {background-color:# blue;}
100% {background-color: #yellow;}
}
you get it

but! The elements that I can't override (like breadcrumbs, main) Id normally use !important but that doesn't work with keyframes.

Is it possible to apply these animations to the elements i'd need !important for? Or am i screwed
Thefishofthecat
#121945
Posted 2024-11-28 04:09:39
#1356553
Hey there! Here is how it should work..

@keyframes change {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  75% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}


And assuming that you want it applied on the sidebar, you'll do the following..

#sidebar .card {
background: red;
animation: change 2s infinite;
}

Hope this helps! Let me know if you have any questions
mimi
#6488
Search Topic