MozillaZine

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

Post Posted October 6th, 2014, 6:47 am

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;
}

DanRaisch
Moderator

User avatar
 
Posts: 121431
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted October 6th, 2014, 7:00 am

Moving to Web Development.

jscher2000

User avatar
 
Posts: 10578
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted October 6th, 2014, 12:18 pm

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

Post Posted October 7th, 2014, 1:11 am

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

trolly
Moderator

User avatar
 
Posts: 39905
Joined: August 22nd, 2005, 7:25 am

Post Posted October 7th, 2014, 1:36 am

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

Post Posted October 7th, 2014, 8:52 am

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

Post Posted October 8th, 2014, 4:10 am

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;}
}

trolly
Moderator

User avatar
 
Posts: 39905
Joined: August 22nd, 2005, 7:25 am

Post Posted October 8th, 2014, 7:40 am

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

Post Posted October 8th, 2014, 7:58 am

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

Post Posted October 23rd, 2014, 2:03 am

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?

trolly
Moderator

User avatar
 
Posts: 39905
Joined: August 22nd, 2005, 7:25 am

Post Posted October 23rd, 2014, 2:50 am

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

Post Posted October 23rd, 2014, 3:14 am

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..

trolly
Moderator

User avatar
 
Posts: 39905
Joined: August 22nd, 2005, 7:25 am

Post Posted October 23rd, 2014, 7:55 am

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

Post Posted October 23rd, 2014, 8:00 am

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...

trolly
Moderator

User avatar
 
Posts: 39905
Joined: August 22nd, 2005, 7:25 am

Post Posted October 23rd, 2014, 8:51 am

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 5 guests