How to animate with relative transforms in css?

Question

I have two boxes:

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

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

They both use the same class:

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

The animation looks like:

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

But this makes both boxes go between -10 and 10px. What I'd like is for it to be relative to the current value of the box.

So box1 at y:100px would animate from 90px to 110px and box2 at y:300px would animate from 290px to 310px

Is it possible to do this in css? I'd rather not have a specific animation per box. Because I may have hundred of boxes.

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

This shows that at the point of animation, both boxes are at the same place... but if it were relative animation they would just be floating up and down in their current place.

Note: please don't use top/left to get relative position I'm looking specifically for relative TRANSFORMS. (if you must know why I'm doing this in 3d for the z axis as x,y are already used).

Answer 1

You can set position of .item elements to relative; use :nth-of-type() pseudo selector to set the top property of each element to the initial position where element should be animated from between the 20px range in relation to its .item sibling.

.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

Here's a nasty javascript solution (yes, I'm looking for a CSS solution that's why I won't mark this as the answer) that injects a dynamic keyframe to the page:

As long as there are less than 100 boxes should work alright I guess.

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

Note: please don't use top/left to get relative position I'm looking specifically for relative TRANSFORMS.

You can adjust html to single .item element as child of a container element with transform set to translateY(100px), position set to absolute; utilize css :after pseudo element at .item element with transform set to 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/