Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    shadyworm is on a distinguished road

      0  

    Default Simple animation works everywhere...except Firefox

    Simple animation works everywhere...except Firefox


    Hi,
    first, Sencha Animator is a really great tool and easy to work with. Thank you, Sencha!

    So I made a really simple animation, where a picture fades in from left to right, from opacity 0 to 1. (code below).
    I uploaded it to my server and tested it on my Mac with Safari and Chrome and it works perfectly. However, it doesn't work with Firefox 4, it only shows the picture without the animation. Neither, it works with Firefox on Ubuntu.

    Is there anything I can do, that it works on Firefox?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>welcome &middot; Made with Sencha Animator</title><style type="text/css">
    #AN-sObj-stage {
     position: relative;
     overflow:hidden;
     -webkit-perspective: 600;
     }
     #AN-sObj-stage div { position: absolute; }
     #AN-sObj-stage a {color: inherit; text-decoration:none;}
     #AN-sObj-stage * {margin:0; padding:0;-webkit-transform-style:preserve-3d;}
     body,#AN-sObj-stage {margin:0; padding:0;}
    #AN-sObj-stage{ width: 420px;
    height: 300px;
    border-color: black;
    background-color: white;
     }
    #AN-sObj-1{ top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
     }
    #AN-sObj-2{ width: 420px;
    height: 300px;
    top: 1px;
    left: 0px;
     }
    
    @-webkit-keyframes AN-ani-0 {
     0% {
        -webkit-transform: translate3d(-420px, 0px, 0px);
    
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
     }
     100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
    
    opacity: 1;
    -webkit-animation-timing-function: ease;
     }
    }
    </style>
    
    </head>
    <body>
    <div id="AN-sObj-stage"><div class="AN-Object" id="AN-sObj-2" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 2.09s; "><div id="AN-sObj-val-2"><img src="welcome.jpg"></div></div></div></body>
    </html>

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    152
    Vote Rating
    1
    mmullany is on a distinguished road

      0  

    Default


    There are two problems
    1) Animator only supports webkit browsers right now (so no firefox support)
    2) Firefox 4 doesn't support @keyframe animations, although they are expected to be in FF5

Similar Threads

  1. Simple ext.element animation
    By charleshimmer in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 1 Feb 2011, 2:19 PM
  2. Works in IE but not Firefox?
    By jcleve in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 27 Oct 2010, 11:20 AM
  3. Simple form panel not rendered in IE (Works in FF)
    By sekarpdkt in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 14 Sep 2009, 9:03 PM
  4. Firefox 3.0 ext 2.0 nothing works
    By mlarese in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 25 Sep 2007, 7:08 AM
  5. gridpanel collapse animation broken in Firefox ?
    By neongrau in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Mar 2007, 3:17 PM

Thread Participants: 1