CSS3 animation problem

Discussion in 'CSS' started by Mizyan, Feb 28, 2011.

0
  1. #1
    Hello, i used to work with the marquee tag to make some content move, and i found it really comfortable since it is compatible with Most browsers. Though there was a problem with the drop in the movement if the speed is set a little high. I tried the animation in CSS3 but the problem is the same. they both don't allow setting FPS and only determine speed. Is it a problem with css3 or is there another way to do so? I know that it can be done with javascript but i don't want to use it. Please help me with this. Thanks in advance.
     
    Mizyan, Feb 28, 2011 IP
  2. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    buzenko, Mar 1, 2011 IP
  3. Bogdanel

    Bogdanel Active Member

    Messages:
    77
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    65
    #3
    Very nice samples.

    Thanks!
     
    Bogdanel, Mar 2, 2011 IP
  4. Mizyan

    Mizyan Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It seems that you didn't get what i meant. I know that i can use ease-in, ease-out and linear, but they all have same problem. the problem is in the FPS, its very low and can't be controlled, and the movement is not smooth. And this is the css code if it does any good :
    <style type="text/css"> 
#move
{

border:#00C thin solid;
position:relative;
-webkit-animation: anim1 13s linear 0s infinite alternate;
}

@-webkit-keyframes anim1
{
0%   {left:-50px; top:0px;}

100% {left:1400px; top:0px;}
}
</style>
    Code (markup):
    and inside the body i have:
    <div id="move"><img src="1.jpg" style="width:200px; height:200px"/></div>
    Code (markup):
     
    Mizyan, Mar 2, 2011 IP
  5. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    FPS can not directly change in css3.
    FPS - this is a problem browsers.
    Fine game with the properties of the css3 animation can be a bit better acceleration.
    But for IE you need to use hacks - js. IE dont support css3 animation properties - http://findmebyip.com/litmus/
    I think you need use js.
     
    Last edited: Mar 2, 2011
    buzenko, Mar 2, 2011 IP
  6. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You might not want to use JavaScript Mizyan but it is the only solution for this problem. There are keyrames in CSS3 animation but, at the moment, they only working in Chrome and Safari.
     
    Divisive Cottonwood, Mar 3, 2011 IP
  7. Mizyan

    Mizyan Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I know that it can be done with js but i was asking if css3 is capable of doing it, but since it cant be done with css3 i think i dont have a choice. Thank you everyone for the help.
     
    Mizyan, Mar 6, 2011 IP