Как анимировать с относительными преобразованиями в css?

Question

У меня есть две коробки:

<div class='item' style='transform:translateY(100px)'> 
</div> 

<div class='item' style='transform:translateY(300px)'> 
</div> 

Они оба используют один и тот же класс:

.item { 
    position:absolute; 
    background:red; 
    animation:float 3s ease-in-out infinite; 
    width:100px; 
    height:100px; 
} 

анимация выглядит следующим образом:

@keyframes float { 
    from, to { transform: translateY(-10px); } 
    50% { transform: translateY(10px); } 
} 

Но это делает обе коробки идут между -10 и 10px. Я бы хотел, чтобы это относилось к текущему значению поля.

Так Box1 при у: 100px будет анимировать из 90 пикселей на 110px и Box2 при у: 300px будет анимировать от 290px до 310px

Можно ли это сделать в CSS? Я бы предпочел не иметь отдельную анимацию в поле. Потому что у меня может быть сотни ящиков.

jsfiddle: https://jsfiddle.net/foreyez/1n1en8uk/

Это показывает, что в точке анимации, обе коробки на том же месте ... но если бы это было по отношению анимации они бы просто плавающим вверх и вниз в их нынешнем месте.

Примечание: пожалуйста, не используйте верхнюю/левую позицию для получения относительного положения. Я ищу специально для относительных ТРАНСФОРМ. (если вы знаете, почему я делаю это в 3d для оси z, так как x, y уже используются).

Answer 1

Вы можете установить position из .item элементов на relative; используйте псевдоселектор :nth-of-type(), чтобы установить свойство top каждого элемента в исходное положение, в котором элемент должен быть анимирован между диапазоном 20px относительно его родного брата .item.

.item { 
 
    position: relative; 
 
    background: red; 
 
    animation: float 3s infinite ease-in-out; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.item:nth-of-type(1) { 
 
    top: 100px; 
 
} 
 
.item:nth-of-type(2) { 
 
    top: 300px; 
 
} 
 
@keyframes float { 
 
    from, to { 
 
    transform: translateY(-10px); 
 
    } 
 
    50% { 
 
    transform: translateY(10px); 
 
    } 
 
}

<div class="item"> 
 
</div> 
 
<div class="item"> 
 
</div>

jsfiddle https://jsfiddle.net/1n1en8uk/3/

Answer 2

Вот противная Javascript решение (да, я ищу решение CSS, поэтому я не буду отмечать это как ответ), который впрыскивает динамический ключевой кадр на страницу:

Пока существует менее 100 коробок, я должен работать нормально.

https://jsfiddle.net/foreyez/6v7n4ro3/

function getTranslateY(obj) 
{ 
var transformMatrix = obj.css("-webkit-transform") || 
    obj.css("-moz-transform") || 
    obj.css("-ms-transform")  || 
    obj.css("-o-transform")  || 
    obj.css("transform"); 
var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(','); 
var x = matrix[12] || matrix[4];//translate x 
var y = matrix[13] || matrix[5];//translate y 
    return parseInt(y); 
} 

function insertAnimation(idx, yy) 
{ 
    var style1 = document.documentElement.appendChild(document.createElement("style")), 
    rule1 = "@keyframes float" + idx + " {\ 
    from, to { transform: translateY("+ (yy-10) +"px); }\ 
    50% { transform: translateY(" + (yy+10) + "px); }\ 
    }"; 

    style1.sheet.insertRule(rule1, 0); 
} 

$(".item").each(function(idx) { 

var currentTranslateY = getTranslateY($(this)); 
insertAnimation(idx, currentTranslateY); 
    $(this).css('animation','float' + idx + ' 3s ease-in-out infinite'); 
}); 

Answer 3

Примечание: пожалуйста, не используйте сверху/слева, чтобы получить относительное положение Я ищу специально для относительных трансформирует.

Вы можете настроить html выделить .item элемент в качестве дочернего элемента контейнера с transform набором для translateY(100px), position набор к absolute; использовать css:after псевдо элемент в .item элемент с transform набором для translateY(200px)

.float { 
 
    transform: translateY(100px); 
 
    position: absolute; 
 
} 
 
.item { 
 
    animation: float 3s infinite ease-in-out; 
 
} 
 
.item, .item:after { 
 
    display: block; 
 
    position: relative; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.item:after { 
 
    content: ""; 
 
    transform: translateY(200px); 
 
} 
 
@keyframes float { 
 
    from, to { 
 
    transform: translateY(-10px); 
 
    } 
 
    50% { 
 
    transform: translateY(10px); 
 
    } 
 
}

<div class="float"> 
 
    <div class="item"> 
 
    </div> 
 
</div>

jsfiddle https://jsfiddle.net/1n1en8uk/5/