Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was closed and archived. Please ask a new question if you need help.

Choppy CSS animation on SVG in Firefox

  • No replies
  • 1 has this problem
  • 4 views
LaurenShutt
LaurenShutt
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!

Modified by cor-el