Animation keyframes


#1

I’m trying to add some custom animation to a button. How do I enter the keyframe? E.g.

@keyframe growIn {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}

My animation is bound to the button correctly, using

growIn .5s


#2

you should use embeded content


#3

Thanks!

I was trying to enter this under Animation Triggers on the Interact tab:

How does this tie in with the $KEYFRAMES variable?


#4

It’s almost there, you just need a couple of minor adjustments:

  • there’s no need to write the @keyframes definition, it’s generated by the exporter. Your CSS keyframes value in RS should be then:
from {
transform: scale(0)
}
to {
transform: scale(1)
}
  • in this case you don’t have to care about the CSS animation value. Set the custom duration directly from the RS setting above.