CSS3 애니메이션이 작동하지 않습니다. Firefox

Question

저는 anime.js 라이브러리를 사용하여 3 개의 div를 사용하여 펄싱 효과를 만듭니다. 이 애니메이션은 크롬, 오페라 및 가장자리에서 올바르게 작동합니다. 나는 CSS에서 다른 공급 업체 접두사를 시도하고 키 프레임과 함께 순수한 CSS 솔루션을 사용했지만 그 결과는 동일합니다. 애니메이션을 가속화하는 하드웨어를 시도했지만 성능에 거의 영향을 미치지 않습니다.

문제는 박스 섀도우 및 그래디언트 스타일이있는 div를 크기 조정할 때 발생합니다. 모질라에서 잠그지 않고 같은 펄싱/웨이브 효과를 만들 수 있습니까?

var circleAnimation = anime({ 
    targets: '.pulse', 
    delay: function(el, index) { 
    return index * 500; 
    }, 
    scale: { 
    value: 12, 
    duration: 5000, 
    easing: 'easeOutCubic', 
    }, 
    opacity: { 
    value: 0, 
    easing: 'easeOutCubic', 
    duration: 4500, 
    }, 
    loop: true 
}); 

JS 바이올린 : https://jsfiddle.net/hzx3jkhq/1/

감사

Answer 1

나는 코드 펜을 시도하고 단지 CSS를 사용하여이 효과를 만들 수있는 또 다른 방법이 될 수 있음을 알고 있습니다. 사실 내가 항상하려고하는 한 가지는 CSS 프리 프로세서로 작업하거나 CSS 키 프레임 애니메이션으로 시도하기 때문에 자바 스크립트 나 JS 라이브러리에 많이 의존하지 않습니다.

코드 펜을 사용하여 라이브러리가 JavaScript에서 입력 한 효과를 얻기 위해 두 가지 속성을 조정하고 0.3에서 0까지의 불투명도와 변형을 발견했습니다. (scale()) from 1 (일반 요소 크기)에서 12까지. 요소를 검사하여이를 알았습니다. 그래서 CSS에 가서 코드에 이것을 추가 :

.expandAnimation{ 
    animation: expanding-opacity 4s infinite; 
} 

/* Expand */ 

@-moz-keyframes expanding-opacity { 
    from { -moz-transform: scale(1);opacity:0.2; } 
    to { -moz-transform: scale(12); opacity:0;} 
} 
@-webkit-keyframes expanding-opacity { 
    from { -webkit-transform: scale(1);opacity:0.2; } 
    to { -webkit-transform: scale(12); opacity:0;} 
} 
@keyframes expanding-opacity { 
    from {transform:scale(1);opacity:0.2;} 
    to {transform:scale(12);opacity:0;} 
} 

자바 스크립트 라이브러리는 해당 코드 주위 어딘가에 모질라 접두사를 부족하기 때문에 라이브러리가 이동하기 때문에, 파이어 폭스에서 작동하지 않는 이유 anime.js을 앞으로 코드를 변경하여 CSS를 변경하면 순수하게 JavaScript로 처리 할 수있는 몇 가지 기술이 있지만 라이브러리의 소스 코드 인 haha에서 완료해야합니다.

또한 그냥 특정 시간에 그 클래스를 조작 할 수 JQuery와의 조각을 추가 : 또한 당신이 중지 또는 쉽게 CSS 값을 변경할 때마다 애니메이션을 중지에 도움이 될 수

$('.pulse').each(function(i,element){    
    setTimeout(function() {    
     $(element).addClass('expandAnimation');   
    }, i * 500);    
}); 

.

희망이 도움이 될 것입니다.

레오.