Prohledat stránky podpory

Vyhněte se podvodům. Za účelem poskytnutí podpory vás nikdy nežádáme, abyste zavolali nebo poslali SMS na nějaké telefonní číslo nebo abyste sdělili své osobní údaje. Jakékoliv podezřelé chování nám prosím nahlaste pomocí odkazu „Nahlásit zneužití“.

Learn More

Toto vlákno bylo uzavřeno a archivováno. Pokud potřebujete pomoci, založte prosím nový dotaz.

Choppy CSS animation on SVG in Firefox

  • Žádné odpovědi
  • 1 má tento problém
  • 1 zobrazení
more options

Locking duplicate thread.
Please continue here: [/questions/1074599]

Here's the CSS:

student {

  -moz-animation-name:slidein-student;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:ease-in-out;
  -moz-animation-duration:2.75s;
  -webkit-animation-name:slidein-student;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-duration:2.75s;
  animation-name:slidein-student;
  animation-iteration-count:1;
  animation-timing-function:ease-in-out;
  animation-duration:2.75s

}

staff {

  -moz-animation-name:slidein-staff;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:ease-in-out;
  -moz-animation-duration:2.75s;
  -webkit-animation-name:slidein-staff;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-duration:2.75s;
  animation-name:slidein-staff;
  animation-iteration-count:1;
  animation-timing-function:ease-in-out;
  animation-duration:2.75s

}

community {

  -moz-animation-name:slidein-community;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:ease-in-out;
  -moz-animation-duration:2.75s;
  -webkit-animation-name:slidein-community;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-duration:2.75s;
  animation-name:slidein-community;
  animation-iteration-count:1;
  animation-timing-function:ease-in-out;
  animation-duration:2.75s

}

services {

  -moz-animation-name:slidein-services;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function:ease-in-out;
  -moz-animation-duration:2.75s;
  -webkit-animation-name:slidein-services;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-duration:2.75s;
  animation-name:slidein-services;
  animation-iteration-count:1;
  animation-timing-function:ease-in-out;
  animation-duration:2.75s

}

@-moz-keyframes slidein-student {

  0% {
      -moz-transform: translateY(-15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  36% {
      display: block;
  }
  100% {
      -moz-transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @-webkit-keyframes slidein-student {

  0% {
      -webkit-transform: translateY(-15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  35% {
      display:block;
  }
  100% {
      -webkit-transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @keyframes slidein-student {

  0% {
      transform: translateY(-15px) translateX(-15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

}

@-moz-keyframes slidein-staff {

  0% {
      -moz-transform: translateY(-15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @-webkit-keyframes slidein-staff {

  0% {
      -webkit-transform: translateY(-15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @keyframes slidein-staff {

  0% {
      transform: translateY(-15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(-15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

}

@-moz-keyframes slidein-community {

  0% {
      -moz-transform: translateY(15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @-webkit-keyframes slidein-community {

  0% {
      -webkit-transform: translateY(15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @keyframes slidein-community {

  0% {
      transform: translateY(15px) translateX(15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

}

@-moz-keyframes slidein-services {

  0% {
      -moz-transform: translateY(15px) translateX(-15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @-webkit-keyframes slidein-services {

  0% {
      -webkit-transform: translateY(15px) translateX(-15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

} @keyframes slidein-services {

  0% {
      transform: translateY(15px) translateX(-15px);
      display:none;
      opacity: 0;
  }
      35% {
      -webkit-transform: translateY(15px) translateX(-15px);
      display: none;
      opacity: 0;
  }
  36% {
      display:block;
  }
  100% {
      transform: translateY(0px) translateX(0px);
      opacity: 1;
  }

}

Any insight would be greatly appreciated!

<i>Locking duplicate thread.<br>Please continue here: [[/questions/1074599]]</i> Here's the CSS: student { -moz-animation-name:slidein-student; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-student; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-student; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } staff { -moz-animation-name:slidein-staff; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-staff; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-staff; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } community { -moz-animation-name:slidein-community; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-community; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-community; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } services { -moz-animation-name:slidein-services; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-services; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-services; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } @-moz-keyframes slidein-student { 0% { -moz-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 36% { display: block; } 100% { -moz-transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-student { 0% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { display:block; } 100% { -webkit-transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-student { 0% { transform: translateY(-15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-staff { 0% { -moz-transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-staff { 0% { -webkit-transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-staff { 0% { transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-community { 0% { -moz-transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-community { 0% { -webkit-transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-community { 0% { transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-services { 0% { -moz-transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-services { 0% { -webkit-transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-services { 0% { transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } Any insight would be greatly appreciated!

Upravil uživatel cor-el dne