Question

我正在尝试解决以下两种情况之间的差异，特别是为什么在第二个div而不是第一个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中的示例代码。

感谢您的任何输入。

Answer 1

简短答案

没有对动画比例和使用CSS变量进行翻译的区别。
CSS出现了一些问题，导致动画无法正常工作。

说明

要转发属性的值，它们需要出现在100%{…}（或0%{…}中，如果取反）
在第四个div的{{1}}中，您使用了一个新变量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;
}

希望有帮助。

为什么动画缩放和使用CSS变量翻译会有所不同？

1 个答案: