Animation property Problem

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Animation property Problem

Post by splashsalons »

Hello,

I'm working on an ebay theme and for no reason Mozilla (31.0 and 32.0) is not displaying Animations. The weird thing is that in other pages the animations are working... Which means that my code is wrong, but here is a sample of the code, please help...

Code: Select all

#tmbrand {
    display: block;
    background: #ffffff;
    width: 100%;
    height: 100px;
    margin: -7px 0px -90px 0px;
    padding: 0px 10px 21px 0px;
    overflow: hidden;
}
#tmbrand ul {
    float:left;
    background: #ffffff;
    display: inline-block;
    width: 3000px;
    margin: -85px 40px;
     -webkit-animation: brandRoll 10s infinite; /* Chrome, Safari, Opera */
     -webkit-animation-delay: -5s;
     -moz-animation: brandRoll 10s infinite; /* Mozila */
     -moz-animation-delay: -5s;
     animation: brandRoll 10s infinite;
     animation-delay: -5s;
}
#tmbrand ul li img {
    float: left;
    padding: 0px 7px 0px 7px;
    margin: 100px 5px 110px 0px;
    color: #fff;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}

 
#tmbrand ul li img:hover
{
    color: #0f0;
    transform: scale(1.5);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}

/* Mozila */
@-moz-keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}


@keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}

/* Chrome, Safari, Opera */
@keyframes brandRoll {
    -webkit-animation-name: scroller;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; 
}

/* Mozila */
@keyframes brandRoll {
    -moz-animation-name: scroller;
    -moz-animation-duration: 10s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite; 
}

/* Standard syntax */
@keyframes brandRoll {
    animation-name: scroller;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
User avatar
DanRaisch
Moderator
Posts: 127185
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Animation property Problem

Post by DanRaisch »

Moving to Web Development.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Animation property Problem

Post by jscher2000 »

Do any errors or warnings appear in the Browser Console or Web Console (overlooking the errors related to unknown webkit properties...)?
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

No, errors...nothing... This is an example of the theme, it has 2 animations and none of them are playing...if that helps to help me.. http://www.ebay.co.uk/itm/Osmo-Clay-Wax ... RK:MESE:IT
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Animation property Problem

Post by trolly »

WebConsole wrote:Error in parsing value for 'background'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Error in parsing value for 'text-shadow'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Unknown property '-moz-box-shadow'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Unknown property 'zoom'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Expected declaration but found '*'. Skipped to next declaration. ofv4dzpvoi4cpivt55gen1qc3.css:1
Unknown property '-moz-border-radius'. Declaration dropped. ofv4dzpvoi4cpivt55gen1qc3.css:1
Expected declaration but found '*'. Skipped to next declaration. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Unknown property 'zoom'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Expected media feature name but found '-webkit-min-device-pixel-ratio'. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Unknown property '-moz-border-radius'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Unknown property '-moz-box-shadow'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Error in parsing value for 'background'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Expected color but found 'left'. Error in parsing value for 'background'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Unknown property '-moz-background-clip'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'. Ruleset ignored due to bad selector. k1qahu4lcm5lhi1rcm0wdffxpqe.css:1
Expected declaration but found '*'. Skipped to next declaration. k1qahu4lcm5lhi1rcm0wdffxpqe.css:6
Unknown property '-moz-box-shadow'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:6
Unknown property '-moz-border-radius'. Declaration dropped. k1qahu4lcm5lhi1rcm0wdffxpqe.css:6
Error in parsing value for 'width'. Declaration dropped. 181549911084
Keyframe rule ignored due to bad selector. ebay.css:334
Keyframe rule ignored due to bad selector. ebay.css:342
Keyframe rule ignored due to bad selector. ebay.css:350
Keyframe rule ignored due to bad selector. ebay.css:334
Keyframe rule ignored due to bad selector. ebay.css:342
Keyframe rule ignored due to bad selector. ebay.css:350
Unknown property '-moz-border-radius'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Unknown property '-moz-box-shadow'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Expected declaration but found '*'. Skipped to next declaration. z32r1y5fbu3oxae04tdrs1l4taw:1
Error in parsing value for 'background'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Error in parsing value for 'text-shadow'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Expected color but found 'transaprent'. Error in parsing value for 'background'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
Unknown property 'zoom'. Declaration dropped. z32r1y5fbu3oxae04tdrs1l4taw:1
ReferenceError: raptor is not defined 181549911084:1318
ReferenceError: raptor is not defined 181549911084:1325

A lot of CSS errors ...
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

Yes, I see... the funny thing is that most of them are selectors that I'm not using in my css... ?!
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

I see many errors, but there are from ebay, not my CSS. What can I do in that case? The only error that comes from my CSS, is from the animation keyframes, and this is the code that I use:

Can you please help me, because I can't find what is wrong with my code?

Code: Select all

/* Chrome, Safari, Opera */
@-webkit-keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}

/* Mozila */
@-moz-keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}

@keyframes brandRoll {
    0% { margin-left: 0px;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0px;}
}
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Animation property Problem

Post by trolly »

Did not see that at first. You have two "identical" keyframes entities:

Code: Select all

/* Mozila */
@keyframes brandRoll {
    -moz-animation-name: scroller;
    -moz-animation-duration: 10s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

/* Standard syntax */
@keyframes brandRoll {
    animation-name: scroller;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

You should try to remove one of them.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

Yes, you were right... But still the problem remains...

Basically I didn't remove it, I change it to @-moz-keyframes brandRoll { }

Still, these extra lines I put them because it didn't work in Mozilla in first place... ?!
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

Although still I didn't got a clear answer on how to write an animation script for mozilla and work?

Also this the very same script is working on some other site that I use it, how come?
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Animation property Problem

Post by trolly »

Can you put together a minimum example to test?
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

Ok, yes...I have this very minimal example:

The Html Code is:

Code: Select all

<html>
<head>
<link href="ebay.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div id="wrapper1">
      <div id='wrapper2'>
<!-- Header Nav Menu -->


         <div id="tmbrand">
            <ul>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_00.jpg" alt="" title="Australian Gold" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_01.jpg" alt="" title="Matrix" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_02.jpg" alt="" title="d:fi" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_03.jpg" alt="" title="ghd" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_04.jpg" alt="" title="LA-BRASILIANA" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_05.jpg" alt="" title="MOROCCANOIL" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_06.jpg" alt="" title="OPI" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_07.jpg" alt="" title="OSMO" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_08.jpg" alt="" title="AMERICAN CREW" width='73'></a></li>
               <li><a href="#"><img src="http://esplashstore.com/modules/tmbrand/slides/slide_09.jpg" alt="" title="KERASTASE" width='73'></a></li>
            </ul>
         </div>
<hr class="brands">

<!-- The Head Slider -->
         <div id="tmnivoslider">    
             <div id="slider" class="nivoSlider">

                  <a href="index.php" class="nivo-imageLink" style="display: none;"><img src="/modules/tmnivoslider/slides/american_crew_poster.jpg" alt="" title="#htmlcaption1" style="display: none;"></a>

                  <a href="index.php haha" class="nivo-imageLink" style="display: none;"><img src="/modules/tmnivoslider/slides/784x200-HQ-brand-Kerastase.jpg" alt="" title="#htmlcaption2" style="display: none;"></a>

                  <a href="index.php" class="nivo-imageLink" style="display: none;"><img src="/modules/tmnivoslider/slides/banner1.jpg" alt="" title="#htmlcaption3" style="display: none;"></a>

                  <a href="index.php" class="nivo-imageLink" style="display: block;"><img src="/modules/tmnivoslider/slides/Design_Pulse_Packshots1.jpg" alt="" title="#htmlcaption4" style="display: none;"></a>

                  <a href="index.php" class="nivo-imageLink" style="display: none;"><img src="/modules/tmnivoslider/slides/MoroccanOil.jpg" alt="" title="#htmlcaption5" style="display: none;"></a>

                  <a href="index.php" class="nivo-imageLink" style="display: none;"><img src="/modules/tmnivoslider/slides/salons.jpg" alt="" title="#htmlcaption6" style="display: none;"></a>         
            </div>
         </div>
         
      </div>
   </div>
</body>
</html>




and my css is:

Code: Select all

/****************************************** reset ******************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea
{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;font-size:12px;font-weight:normal;line-height:normal;}

b,strong {font-weight:bold;}
i {font-style:italic;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}
a, span {vertical-align:baseline;}

header, nav, section, article, aside, footer {display:block;}


/****************************************** general styles ******************************************/
html, body {width:100%;height:100%;}
body {font:normal 12px "Century Gothic", Arial, Helvetica, sans-serif; color:#999999; font-weight: normal;}

/* p {padding:20px 0 0 0;color:#999;} */
a {color:#2f2e2e;text-decoration:none;}
a:hover {text-decoration:none; color:#8a8989;}

h1 { color: #2F2E2E;
    font-family: 'Century Gothic',sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding:15px 20px 0 0;
    text-transform: uppercase;}
/* h1 span {float:right;padding:3px 0 0 0;font-size:12px;font-weight:normal; color: #2F2E2E;text-transform:none;} */

h2,
h3,
h4 {padding:20px 0 0 0;font-size:14px;font-weight:bold;color:#000;text-transform:uppercase; font-family: 'Century Gothic',sans-serif;}

.orange {color: #f86907;}
/****************************************** layout ******************************************/
#wrapper1 {
   min-width:1200px;
   min-height:100%;
}
#wrapper2 {
   height:100%;
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
}

/****************************************** hook home ******************************************/
/* tmnivoslider.tpl */
#tmnivoslider {
   width:700px;
   height:150px; 
   
}
#slider {
   float: left;
   margin-left: 242px;
   margin-top: 0;
   margin-bottom: 201px;
   width:700px;
   height:150px;
   overflow: hidden;
    -webkit-animation: myfirst 27s infinite; /* Chrome, Safari, Opera */
    -moz-animation: myfirst 27s infinite; /* Mozila */
   animation: myfirst 27s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
    16%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
    32%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
    48%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
    64%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
    80%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
    100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}

@-moz-keyframes myfirst { /* Mozila */
    0%   {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
    16%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
    32%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
    48%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
    64%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
    80%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
    100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
    16%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
    32%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
    48%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
    64%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
    80%  {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
    100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}

/****************************************** Header ******************************************************************/

/************************************* Tm Brand - line ************************************************************/
#tmbrand {
    display: block;
    background: #ffffff;
    width: 100%;
    height: 100px;
    margin: -7px 0 -90px 0;
    padding: 0 10px 21px 0;
    overflow: hidden;
}
#tmbrand ul {
    float:left;
    background: #ffffff;
    display: inline-block;
    width: 3000px;
    padding: 0;
    margin-top: -80px;
    -webkit-animation: brandRoll 10s infinite; /* Chrome, Safari, Opera */
    -moz-animation: brandRoll 10s infinite; /* Mozila */
    animation: brandRoll 10s infinite;

}
#tmbrand ul li img {
    float: left;
    padding: 0 7px 0 7px;
    margin: 100px 5px 110px 0px;
    color: #ffffff;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
 
#tmbrand ul li img:hover
{
    color: #0f0f0f;
    transform: scale(1.5);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes brandRoll {
    0% { margin-left: 0;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0;}
}

/* Mozila */
@-moz-keyframes brandRoll {
    0% { margin-left: 0;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0;}
}


@keyframes brandRoll {
    0% { margin-left: 0;}
    99% { margin-left: -1500px;}
    100% { margin-left: 0;}
}



Please pinpoint the exact problem of this, because it is diving me crazy... #-o #-o #-o

p.s. I hope it is my mistake on the code and I can't see it all that time..
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Animation property Problem

Post by trolly »

I prefer it online because it is easier to test and I do not need to substitute the missing images.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
splashsalons
Posts: 11
Joined: October 6th, 2014, 6:38 am

Re: Animation property Problem

Post by splashsalons »

Ok, I made a test folder on my server so you can test it here.

http://esplashstore.com/test/

I hope you find something...Also I have to note that I'm running mozilla on Mac... I don't know if it appears different in windows Mozilla or Linux Mozilla...
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Animation property Problem

Post by trolly »

What I see is:
some logos appear, scroll to the left till the area is blank and then the logos appears again (they are not scrolled in).

Is that what you see?

Edit:
Looks the same in IE11 and the sections below are partially covered.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
Post Reply