Streaming live at 10am (PST)

CSS3 keyframe animation


#1

You can add the animation to webflow
Example:(Bottom of page)

webflow.com

You've even used it yourself

And why you can not use more property of css3?
Example:w3school.com

(Sorry, my English is poor)


#2

Hi @vorojak, CSS3 keyframe animation is definitely something we are interested to explore in future versions of webflow. For now, you can accomplish this using a custom script embed. Here's an example of how that works:

First, drag an embed block into your site.

Paste the following into the embed:

<style>
  @-webkit-keyframes bounce-right { 50% { -webkit-transform: translateX(5px); } }
  @-moz-keyframes bounce-right { 50% { -moz-transform: translateX(5px); } }
  @keyframes bounce-right { 50% { transform: translateX(5px); } }

  .animate-bounce {
    -webkit-animation: bounce-right 0.8s ease infinite;
    -moz-animation: bounce-right 0.8s ease infinite;
    animation: bounce-right 0.8s ease infinite;
  }
</style>

Then, add an element - a button for example:

And finally, add a class called "animate-bounce" to your element:

Hope that helps!
-Dan


#3

thank you danro
I am waiting for the new webflow


#4