如何在CSS中使用相对变换进行动画制作？

它们都使用相同的类：

.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在Y：100像素将从90像素的动画来为y 110px 和BOX2：300像素将从290px动画到310px

是否有可能做到这一点在CSS？我宁愿没有一个特定的动画每盒。因为我可能有一百个盒子。

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

这表明，在动画的角度来看，这两个箱子是在同一个地方......但如果它是相对的动画，他们也只是飘了起来，并在其当前位置下来。

注意：请不要使用顶部/左侧来获取相对位置，我正在寻找相关的TRANSFORMS。（如果你必须知道为什么我在x轴上以3d为单位做这个，因为x，y已经被使用了）。

来源

2016-09-21 foreyez

'是从，为'@'keyframes'有效'css'语法？ – guest271314

是的，因为它不会动画，否则 – foreyez

定位元素相对应该解决 - > https://jsfiddle.net/adeneo/1n1en8uk/2/ – adeneo

您可以将.item元素的position设置为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/

来源

2016-09-21 03:42:21 guest271314

谢谢，我忘了添加我不能使用顶部或左侧。我实际上是在3维中使用它，所以需要在Z变换上做到这一点，并且我的所有框都将值设置为TranslateZ。所以这必须在Z中工作，但是，使用top/left获得亲属的黑客攻击是一件好事。 – foreyez

也可以代替第n种类型，可以只设置div风格的顶部。 – foreyez

@foreyez _“我忘了添加我不能使用顶部或左边。”_原来的问题并没有包括'top'和'left'属性不能用来满足要求。 – guest271314

这里是一个讨厌的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'); 
});

来源

2016-09-21 03:49:47 foreyez

OP的原始需求似乎是使用'css'？ _“如何用css进行相对变换动画？”_？ – guest271314

_“是的，但没有办法不幸。:(”_你确定只有'css'没有办法吗？或者只使用'css'而不是要求的一部分？ – guest271314

_“截至目前为止没有办法，但希望有人来证明我错了。“_好吧，有一种使用'top'的方法，虽然'top'，'left'的排除在原始问题中没有描述，原来的Question也是”如何在CSS中使用相对变换进行动画制作？“，而不是”css“或”javascript“？ – guest271314

注：请不要使用顶部/左边得到我找专门针对相对变换的相对位置。

您可以调整html单挑.item元素作为容器元素的孩子transform设置为translateY(100px)，position设置为absolute;与transform组利用css:after伪元素在.item元素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/

来源

2016-09-21 05:14:28 guest271314

如何在CSS中使用相对变换进行动画制作？

回答

相关问题