css 애니메이션 크기가 작동하지 않습니다.

Question

CSS 키 프레임을 사용하여 애니메이션을 만듭니다. 나는이 있습니다

@keyframes experience { 
0% { 
-webkit-transform: scale(0,0); 
     transform: scale(0,0); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
60% { 
-webkit-transform: scale(1,1); 
     transform: scale(1,1); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
100% { 
-webkit-transform: translateY(0px); 
     transform: translateY(0px); 
opacity: 1; 
} 
} 

모든 애니메이션이 대신 갈은 하나의 확장 비율] 속성을 제외하고 작동합니다. 나는 JQuery와 웨이 포인트 플러그인 작업 및 웨이 포인트 안타 내가 클래스 위의 애니메이션을 사용

.experience { 
    -webkit-transform: scale(0); 
      transform: scale(0); 
    -webkit-animation: experience 2s ease-in forwards ; 
      animation: experience 2s ease-in forwards ; 
} 

를 추가 할 때 사업부는 클래스

.workitem { 
    position: relative; 
    width: 1000px; 
    height: 200px; 
    background-color: #333; 
    margin: 0 auto; 
    opacity: 0; 
    -webkit-transform: scale(0); 
     transform: scale(0); 
} 

있습니다.

Answer 1

이 ..입니다 것은 받아 다음 CSS를 살펴 :

color: red; 
    color: blue; 

:

transform: scale(0,0); 
    transform: translateY(40px); 

이이 같은 것을 설정하는 것과 같은 것

이 경우 스타일 규칙이 두 번째로오고 red에 대한 것보다 우선하므로 요소의 color 속성은 blue이 될 것으로 예상 할 수 있습니다.

transform과 동일합니다. 다른 유형의 변환을 사용하고 있지만 여전히 동일한 transform 속성을 공유합니다.

scale(0,0)으로 시작하기 때문에 급격한 점프가 표시되지만 애니메이션이 시작 되 자마자 이제는 스케일링이 아닌 요소 만 변환되므로 즉시 정상으로 되돌아갑니다.

대신,이 같은 당신의 스타일을 선언함으로써이 문제를 해결 얻을 수 있습니다 :

transform: scale(0,0) translateY(40px); 

을 그리고 분명히 그곳에서 접두사 모든 적절한 공급 업체에 추가!

Answer 2

사용

@-webkit-keyframes 

웹킷도 키 프레임의 접두사를 사용합니다. 전체 예제 :

@keyframes anim{ 
    to{transform:rotate(30deg);} 
} 
@-webkit-keyframes anim{ 
    to{-webkit-transform:rotate(30deg);} 
} 
#element{ 
    animation:anim; 
    -webkit-animation:anim; 
} 

참고 : 실제로 scale 변환을 무시하기 때문에 나는 접두사가 키 프레임에서 접두사 버전에서 사용되는 것을 보여주고 싶었다 때문에 변환 사용했습니다에만