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.
Printable View
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.
Might wanna post your code.
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.
Hope that helps.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