CSS3 keyframe animation

Community resources Product feedback
1

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

[webflow.com][1]

You’ve even used it yourself

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

(Sorry, my English is poor)
[1]: https://webflow.com
[2]: http://w3schools.com/css/css3_intro.asp

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.

1474×788 140 KB

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:

1020×630 75.4 KB

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

1070×652 65 KB

Hope that helps!
-Dan

3 Likes
3

thank you danro
I am waiting for the new webflow