Jump to content
Search Community

How to change color in a CSS3 KeyFrame Animation?

dcotto test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello,
i am trying to change the keyframe animations color that is within '@keyframe colors' css code.  if you look at my codepen.. you can see a snippet of the code i am trying to fix... bare with me if the code is not 100% accurate.. it might be a little pseudo... anyway.
 
i am trying to target that keyframe animation called "@keyframe colors" and trying to change the property "color: #010101' to something else... using greensock how can i target that @keyframe colors" property color.
thank you i am really in a bind and need help

See the Pen MWpbQVv by doedoe-dumby (@doedoe-dumby) on CodePen

Link to comment
Share on other sites

This is definitely not the right way to go about things. I don't see any way that mixing GSAP and CSS like this is a good plan.

Lets leave the code aside for a bit. Could you explain what you're trying to accomplish? Maybe we can help.
 

  • Like 2
Link to comment
Share on other sites

See the Pen eYvBMXa by doedoe-dumby (@doedoe-dumby) on CodePen

 

Hello Cassie,

please take a look at my codepen URL. i am not sure why the CSS3 keyframe animation is not working in codepn but lets imagine that it is.. CTA text color should start off as black and the hover color for CTA should be RED.

 

The issue i am having is this,  if you look in the JS panel in codepen you will see my TimelineMax animation... in there you will see that we are animating 4 images to appear after about 2 seconds between each other... after frame 4 (fr4) we want our cta and hover colors to change... frame 1, frame2 & frame3 should have cta text color black and hover color red.. but the last, frame 4, the colors should change and they should be CTA text color white and Hover color black.

 

we need to animate this

 

Also, in the future, we would need to change the CTA Text & CTA Hover colors for frame 1 or frame 2 or frame 3 etc. how would we interject them in the code as we have written there in the codepen within those comments

Link to comment
Share on other sites

  • Solution

See the Pen 1dee3a3481e055175817d543954e9c4a by cassie-codes (@cassie-codes) on CodePen

 

CSS variables will definitely solve the issue of wanting to change colors or hover colors!

You should also look into using GSAP 3 You're using older syntax even though you're importing the new library.

I'm not sure what you're trying to achieve overall as none of the linked pen is working - but I would hazard against mixing up CSS animation and GSAP, it can get messy.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

hey cassie this was close, thank you for your response. but this doesnt change the hover color.  Would you happen to know how to target the hover color?.. if we can do that then we have successfully completed our mission!

Link to comment
Share on other sites

#cta {
  --color: black;
  --hover-color: black;
  color: var(--color);
}

#cta:hover {
  background-color: var(--hover-color)
}


 

var tl = gsap.timeline()

 
tl
  .to ( '#cta', { '--color': 'purple', '--hover-color': 'green'})
  .to ( '#cta', { '--color': 'green', '--hover-color': 'red' })
  .to ( '#cta', { '--color': 'orange', '--hover-color': 'pink' })


Easiest way would be to duplicate the code I provided, CSS vars don't have to be declared on root.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...