Are css @keyframes possible with Webflow interaction?

[Bence_Gulyas (Bence Gulyás)]

I want to move a div and while it’s moving I want to increase its opacity then decrease it. With css keyframes I’d do something like this:

.animated-element {
  animation: move-and-fade 5s ease-in-out infinite;
}

@keyframes move-and-fade {
  0% {
    transform: translateY(0px);
    opacity: 10%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: translateY(620px);
    opacity: 10%;
  }
}

Is this possible natively with Webflow interaction? It seems I can only add actions with previous action or after.

I want to achieve something similar to this: https://linear.app/, where the small lines are moving on the border of the hero image.

[Romuald_Jay]

Hi

You can add action with another one, but you can set on each a delay or a diferents duration and diferent easing… So yes you can do your css animation in Webflow. Just transform you % in time value inside Webflow interaction panel

[Bence_Gulyas (Bence Gulyás)]

Thank you for the reply. I’m not sure how though.

Here’s a link to an example.

If I use two opacity actions at the same time only the second one executes. I don’t know how to add two opacity changes WHILE the move action is happening.