Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

Learn More

이 쓰레드는 잠기고 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

Choppy CSS animation on SVG in Firefox

  • 답글 없음
  • 1 이 문제를 만남
  • 2 보기
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!

글쓴이 cor-el 수정일시