CSS3 애니메이션 : 나는이 문제를 다음 한

Question

0 %에 키 프레임에 대한 속성을 상속 : 을 나는 키 프레임 규칙 CSS3 애니메이션을 사용하려면 (@keyframes MyName로 {})

문제는 내가에서 규칙 SINGLE를 사용하려면,이다 여러 요소에 대한 키 프레임 애니메이션이지만 이러한 요소의 위치는 각각 다릅니다. 따라서 @keyframes 애니메이션은 규칙의 0 % (또는 {}) 규칙에서 선택기의 원래 속성을 상속해야하므로 애니메이션은 선택기의 원래 위치와 크기에서 시작됩니다.

@keyframes myanim { 
    0% { 
    left: inherit; 
    top: inherit; 
width:inherit; 
height:inherit; 
    } 

    100% { 
top: 50%; 
left:50%; 
    width: 100%; 
    height: 60%; 
    } 
} 

그리고 선택 :

.myselector-one { 
top:10em; 
left:0em; 
width:10em; 
height:5em; 
animation: myanim 1s; 
} 
.myselector-two { 
top:20em; 
left:30em; 
width: 15em; 
height: 8em; 
animation: myanim 1s; 
} 

목표는 각 선택의 원래 속성을 가져올 원래 위치와 크기로 0 %에 키 프레임에 넣어 100에 애니메이션을하는 것입니다 이와 같은

모든 선택자에 대해 동일한 속성을 가진 %.

이것이 가능합니까 아니면 각 선택기에 대한 애니메이션을 만들어야합니까? 문제는 동적으로 계산 될 때 그 위치를 알 수 없다는 것입니다.

제발 jQuery 솔루션이 없으니, 순수한 CSS3 중 하나! 나는 jQuery 애니메이션 메서드를 사용하고 싶지 않다.

Answer 1

흠, 나는 잠시 동안이 문제를 조사해 왔으며 CSS 애니메이션을 사용하는 것이 가능하지 않다고 생각합니다. 나는 this JSFiddle으로 여러 가지를 시도해 왔고 through tutorialsabout CSS Animations (다른 사람이 동일한 문제를 언급하는지 확인) 및 other informationabout it도 실행합니다.

나는 당신이 성취하고자하는 것을 깨닫고 쉽게 해결할 수 있다고 생각합니다. 위치가 동적으로 계산되는 경우 자바 클래스 (일부 미친 고급 CSS 계산 방법)를 사용한다고 가정합니다. DOM 요소의 스타일을 새 left 또는 top 위치로 설정한다고 생각합니다. . jQuery 애니메이션에 대해서는 언급하지 않지만 대신 할 수있는 것은 자바와 함께 CSS3 Transitions을 사용하는 것입니다. 즉, 자바 스크립트에서 수행되는 것과는 대조적으로 컴퓨팅이 네이티브 (하드웨어 가속화)되는 것과 같은 CSS 애니메이션의 이점을 얻을 수 있지만 몇 가지 사항을 놓치게됩니다.

가장 중요한 점은 브라우저 like there is for CSS Animations에 대한 전환 이벤트가 없거나 키 프레임을 미세하게 제어 할 수는 없지만 동적으로 작업해야한다는 것입니다. 귀하의 질문은 0%의 키 프레임과 100% 중 하나만 언급하기 때문에 나는 제안합니다.

CSS 애니메이션을 사용하는 것이 정적 일 필요가 있으며 (전환과 달리) 애니메이션을 수행하기 위해 현재 설정된 값을 가져 오지 못한다는 문제가 있습니다. inherit을 사용하는 경우 실제로는 top 및 left 등 from it's parent을 사용하려고합니다.

다시 말하지만, 이것은 순수한 CSS에 대한 요구 사항을 충족시키지 않지만 CSS 전환을 사용하면 jQuery 애니메이션이 아닌 Javascript를 통한 제한된 DOM 조작을 의미합니다.

여기에 another JSFiddle은 jQuery (클래스 또는 인라인 스타일을 설정하는 아주 기본적인 자바 스크립트)와 CSS 전환을 사용하지 않습니다.

HTML

<div class="myselector-one" id="a">Click Me</div> 
<div class="myselector-two" id="b">Click Me</div> 

자바 스크립트

document.getElementById("a").onclick = function() 
{ 
    if (this.className.indexOf("animate-complete")!=-1) 
    { 
     this.className = this.className.replace(/animate\-complete/g,""); 
    } 
    else 
    { 
     this.className += " animate-complete"; 
    } 
} 
var bIsTransitioned = false; 
document.getElementById("b").onclick = function() 
{ 
    if (!bIsTransitioned) 
    { 
     this.style.top = "50%"; 
     this.style.left = "50%"; 
     this.style.width = "100%"; 
     this.style.height = "60%"; 
    } 
    else 
    { 
     this.style.top = ""; 
     this.style.left = ""; 
     this.style.width = ""; 
     this.style.height = "";   
    } 
    bIsTransitioned = !bIsTransitioned; 
} 

CSS

.myselector-one { 
    top:10em; 
    left:0em; 
    width:10em; 
    height:5em; 
    transition:all 2s; 
    background-color:#ffaa99; 
    position:absolute; 
} 
.myselector-two { 
    top:4em; 
    left:30em; 
    width: 15em; 
    height: 8em; 
    transition:all 2s; 
    background-color:#aaff99; 
    position:absolute; 
} 
.animate-complete 
{ 
    top: 50%; 
    left:50%; 
    width: 100%; 
    height: 60%; 
}