我试图弄清楚以下情况之间的区别——特别是为什么第二个 div 中保留了比例，而不是第一个。
其次，为什么类似的代码不适用于第三个和第四个 div 之间的转换。
(而且，如果这还不够神秘，为什么您必须反转第一个和第三个 div 中的动画以使它们运行正确的方向)。
只需点击每个 Div 即可启动动画
#div1,#div2,#div3,#div4{position:absolute;height:40px;width:40px;background:orange}
#div2{background:blue;top:100px}
#div3{background:green;top:200px}
#div4{background:purple;top:300px}
@-webkit-keyframes scaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{--trnsS:2}
}
.scaleTest {-webkit-animation:scaleTest reverse forwards linear 5s}
@-webkit-keyframes otherScaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{-webkit-transform:scale(var(--trnsS,2))}
}
.otherScaleTest {-webkit-animation:otherScaleTest forwards linear 5s}
@-webkit-keyframes translateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{--trnsx:200px}
}
.translateTest {-webkit-animation:translateTest reverse forwards linear 5s}
@-webkit-keyframes otherTranslateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{-webkit-transform:translate3d(var(--trnsx,200px),--transy,0px)}
}
.otherTranslateTest {-webkit-animation:otherTranslateTest reverse forwards linear 5s}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="div1" onclick="javascript:this.className='scaleTest'"></div>
<div id="div2" onclick="javascript:this.className='otherScaleTest'"></div>
<div id="div3" onclick="javascript:this.className='translateTest'"></div>
<div id="div4" onclick="javascript:this.className='otherTranslateTest'"></div>
</body>
</html>我只针对 Webkit 渲染引擎，所以我在 Chrome/Chromium 中查看示例代码。
感谢任何输入。
最佳答案
简答
使用 CSS 变量动画缩放和平移没有区别对待。
您的 CSS 中存在一些问题，导致您的动画无法正常工作。
解释
要转发属性的值，它们需要出现在
100%{…}中(如果反转，则为0%{…})在第 4 个
div中，在您的otherTranslateTest中，您使用了一个新变量--transy(必须是错字--trnsy错误!)甚至没有使用var(…)。这导致动画根本不起作用。我已将其更改为var(--trnsy, 0px)以使其正常工作。您不需要反转动画。以上内容纠正了您的神秘行为。
⋅⋅⋅
我还在代码片段中添加了以下内容以使其更简单(无需重新运行以重新播放动画)和更直观:
function toggle(name){
event.target.classList.toggle(name);
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
工作片段
function toggle(name) {
event.target.classList.toggle(name);
}div {
position: absolute;
height: 40px;
width: 40px;
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
#div1 {
background: orange;
}
#div2 {
background: blue;
top: 100px;
}
#div3 {
background: green;
top: 200px;
}
#div4 {
background: purple;
top: 300px;
}
/* Animation of div1 */
@keyframes scaleTest {
0% {
transform: scale(var(--trnsS, 1));
--trnsS: 2; /* Added to work with forwards */
}
100% {
--trnsS: 2;
}
}
.scaleTest {
animation: scaleTest reverse forwards linear 5s;
}
/* Animation of div2 */
/* Why using an empty CSS var ? */
@keyframes otherScaleTest {
0% {
transform: scale(var(--trnsS, 1));
}
100% {
transform: scale(var(--trnsS, 2));
}
}
.otherScaleTest {
animation: otherScaleTest forwards linear 5s;
}
/* Animation of div3 */
@keyframes translateTest {
100% {
--trnsx: 200px;
}
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
--trnsx: 200px; /* Added to work with forwards */
}
}
.translateTest {
animation: translateTest reverse forwards linear 5s;
}
/* Animation of div4 */
@keyframes otherTranslateTest {
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
}
100% {
transform: translate3d(var(--trnsx, 200px), var(--trnsy, 0px), 0px);
}
}
.otherTranslateTest {
animation: otherTranslateTest forwards linear 5s;
}<div id="div1" onclick="toggle('scaleTest');"></div>
<div id="div2" onclick="toggle('otherScaleTest');"></div>
<div id="div3" onclick="toggle('translateTest');"></div>
<div id="div4" onclick="toggle('otherTranslateTest');"></div>希望对您有所帮助。
关于css - 为什么使用 css 变量进行动画缩放和平移处理不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51767847/