Binding CSS animation

Server Code Codeless
1

How do I create a binding to a @keyframes CSS animation?

2

Could you describe what you’d like to accomplish? Try focusing on the end goal rather than a recipe.

Thanks,
Mark

3

Hi Mark,

I am trying get https://backendlessappcontent.com/CE9CA061-AFDB-F16B-FF15-2A78893EF900/E72216FB-A303-4CAF-889D-E9FE93BE9E29/files/ui-builder/containers/default/index.html?page=login on opening bring the left down and the right up 04.06.2021-15.09.06 and as I continue to learn, believe @Keyframes CSS is the solution?

P.S Loving Backendless and UI Builder and all that it brings. I am at the very basic level but I guess that’s were a percentage of new codeless users start.

4

This helps, @Mark_Wilkinson. Someone from our team will be in touch to help you out.

5

Thanks Mark. Once I understand certain things, I can apply the principles throughout. Loving Backendless

6

You can look through this answer.

But instead @media directive you should use @keyframes.

7

Hi Oleg,

I have to show the max-width even though it pertains to a classes cell?

Copying Using CSS animations - CSS: Cascading Style Sheets | MDN
and your advise, I am struggling to make it work or, understand the logic.

Trying to animate this cell 04.07.2021-08.23.13 which has a cell classes .animation-email

Mark

8

Hello @Mark_Wilkinson

If I understood you correctly, then this will help you:

Copy code 
.image1 {
  animation-name: image1;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

.image2 {
  animation-name: image2;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes image1 {
  from {
  transform: translate(0, -1000px);
  }

  to {
    transform: translate(0, 0);
  }
}

@keyframes image2 {
  from {
    transform: translate(0, 1000px);
  }

  to {
    transform: translate(0, 0);
  }
}

Result:

Regard, Viktor

3 Likes
9

Excellent. Thank you!