-
Nov 8th, 2011, 07:05 PM
#1
Thread Starter
Addicted Member
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.
-
Nov 8th, 2011, 11:24 PM
#2
Re: How to set Webkit animation speed using CSS?
Might wanna post your code.
-
Nov 11th, 2011, 02:12 PM
#3
Addicted Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|