CSS3 анимации: наследовать имущество для ключевого кадра на 0%

Question

я следующая проблема: Я хочу использовать CSS3 анимации с правилами ключевого кадра (@keyframes MyName {})

Проблема, я хочу использовать ЕДИНСТВЕННЫЙ в властвуй анимация ключевого кадра для нескольких элементов, но эти элементы имеют разные позиции. Таким образом, анимация @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 Animations. Я пытался с this JSFiddle несколько разных вещей и работает through tutorialsabout CSS Animations (видя, что кто-то упоминает ту же проблему), а также other informationabout it.

Я тогда пришел к осознанию того, что вы пытаетесь выполнить, и я думаю, что, возможно, есть более легкое решение. Если вы планируете динамически вычислять местоположения, я бы предположил, что вы действительно используете некоторый уровень Javascript (или какой-то безумный продвинутый метод CSS calc), поэтому я, по крайней мере, подумал бы, что вы бы установили стиль элемента DOM с новыми позициями left или top , Хотя я не говорю о анимации jQuery, вместо этого вы можете использовать CSS3 Transitions в сочетании с Javascript. Это означает, что вы получаете некоторые преимущества анимации CSS, такие как вычисление, которое является более родным (аппаратное ускорение), а не в Javascript, но вы проиграете несколько вещей.

Самое главное, что нет событий перехода для браузера like there is for CSS Animations, и вы не можете контролировать мелкие зерна по ключевым кадрам, но вы можете работать с ним динамически. Я предлагаю это только потому, что ваш вопрос относится только к ключевому кадру 0% и одному из 100%.

Проблема с тем, что вы пытались сделать, заключается в том, что использование анимации CSS должно быть статическим и не будет тянуть значения, которые в настоящее время установлены для анимации (в отличие от переходов). Когда вы используете inherit, вы на самом деле пытаетесь использовать его top и left и т. Д. from it's parent.

Опять же, это не соответствует вашим требованиям чистого CSS, но использование CSS Transitions означает только ограниченное манипулирование DOM через Javascript, а не то, что делает iQuery animate.

Здесь another JSFiddle без использования jQuery (только очень простой javascript для установки класса или встроенных стилей) и переходов CSS.

HTML

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

Javascript

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%; 
}