Results 1 to 3 of 3

Thread: How to set Webkit animation speed using CSS?

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Mar 2007
    Posts
    183

    How to set Webkit animation speed using CSS?

    I have a Webkit animation that goes from the top of the window to the bottom. The problem is when I resize the window the speed changes. I want it to be constant. I would hate to use Javascript, but I guess I will if I have to.
    Do not read this sentence.
    You read that last one, didn't you?
    Darn. You now read the previous two.

    Check out my pins on Pinterest!

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: How to set Webkit animation speed using CSS?

    Might wanna post your code.

  3. #3
    Addicted Member
    Join Date
    Sep 2005
    Posts
    150

    Re: How to set Webkit animation speed using CSS?

    As someone has rightly said, it would help if you posted your code. However, I have written a piece of CSS3 Animation code that I think might solve your problem. The code is posted below. Please, note that the -webkit-animation property only works on the latest versions of Safari and Google Chrome web browsers at the moment.

    The piece of code is an improved version of the code in the Book; HTML5: Design Rich Internet Applications, by Mathew David, Focal Press. 2010. I am not advertising for him, but the book is good in solving this kind of problems.

    Just copy the code and save it as test.html or something else and preview it in Safari or Google Chrome. You can also change the word top to left in two places in the code to make the animation go from left to right on the web page.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>CSS3 Webkit Animation</title>
    <style type="text/css">
    
    @-webkit-keyframes bounce {
      from {
        top: 0px;
           }
       to {
        top: 450px;
      }
     }
    
     .exampleAnimation {
     -webkit-animation-name: bounce;
     -webkit-animation-duration: 3s;
     -webkit-animation-iteration-count: 6;
     -webkit-animation-direction: alternate;
       position: relative;
        left: 0px;
      }
    
     .exampleAnimation {border: 1px solid #ededed; background-color: #00ff00;
                         width: 100px; height: 80px;}
    </style>
    </head>
    <body>
      <p class="exampleAnimation">
       Watch the text bounces back and forth!
     </p>
    
    </body>
    </html
    Hope that helps.
    Last edited by menre; Nov 11th, 2011 at 02:17 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width