I have a button element that has a 500ms animation which is used when hovered to change the button styling. I added an interaction also on hover but that appears to override the css animation delay. Is there a way around this?
If you set an interaction with a transition on an element that transition will override the transition set on the element in the style panel.
We’re thinking of ways to copy over the transition from the style panel to the interaction so it’s also included, but for now it’s just something you have to keep in mind. You can wrap the element in a div block and add an interaction on it instead of the element. That’s usually a good workaround.
1 Like
@MikeStvnsn Hey Mike we just pushed an update that carries over transitions from the style panel to elements with interactions, so you won’t lose transitions that were previously set on the element.
If you do have a transition on an interaction that’s affecting the same css property (opacity for example) it will override it. So if you have opacity set on hover to transition 500ms and then you have opacity transition of 1000ms in an interaction thats set on the element, then the 1000ms will win (since you can only have one list of transitions per element).
Hope this helps!
3 Likes
Awesome! You guys are running a great business here. Thanks for reading our feedback and taking it seriously and responding so promptly. I’m really looking forward to seeing how far Webflow can go.