Are css @keyframes possible with Webflow interaction?

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:, where the small lines are moving on the border of the hero image.


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

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.
Screenshot 2022-12-29 at 10.09.05