Question

有人知道如何以正确的方式制作过渡动画吗？正如您在代码中看到的那样，在一小段延迟之后，div必须向上移动。我无法让它发挥作用。

Codepen： http://codepen.io/thijs-webber/pen/jqgPrK

HTML：

.test{
  background-color: lime;
  width: 100px;
  margin: 0 auto;
  margin-top: 100px;
  height: 100px;
  padding: 10px;
  text-align: center;
  line-height: 100px;

  -moz-transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -o-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  transform: translate(0, -100px);

  transition: transform 1s ease-out;
  -webkit-transition: transform 1s ease-out;
  -moz-transition: transform 1s ease-out;
  -ms-transition: transform 1s ease-out;
  -o-transition: transform 1s ease-out;

  transition-delay: 1s;
}

CSS：

index.js

Answer 1

使用触发器是一个想法，但如果您不想要任何触发器，则只需使用CSS3 keyframes

以下是您的代码：

＆＃13;

.test{
  background-color: lime;
  width: 100px;
  margin: 0 auto;
  margin-top: 100px;
  height: 100px;
  padding: 10px;
  text-align: center;
  line-height: 100px;
  
  -moz-transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -o-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  transform: translate(0, -100px);

  
  -moz-transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -o-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  transform: translate(0, -100px);

    animation-name: moveUp;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
 
}

@keyframes moveUp {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(0, -100px);
    }
}

＆＃13;

<div class="test">
  test
</div>

＆＃13;

我添加了必要的动画样式，例如名称（在keyframes中使用），此动画应出现的次数，时间函数和持续时间：

animation-name: moveUp;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;

我希望这有帮助！

Answer 2

它有效，但由于没有触发器，你无法观察它的运动。加载页面后，转换已经完成。如果你想观察过渡，应该有一个像悬停的触发器，或者你可以使用动画css方法。在代码段悬停是一个触发器。正如我所说，如果你想在打开页面时使用它，你可以使用动画。

＆＃13;

.test{
  background-color: lime;
  width: 100px;
  margin: 0 auto;
  margin-top: 100px;
  height: 100px;
  padding: 10px;
  text-align: center;
  line-height: 100px;

   transition: transform 1s ease-out;
  -webkit-transition: transform 1s ease-out;
  -moz-transition: transform 1s ease-out;
  -ms-transition: transform 1s ease-out;
  -o-transition: transform 1s ease-out;

  
  
  }

  .test:hover{
  
  -moz-transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -o-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  transform: translate(0, -100px);

 
}

＆＃13;

<div class="test">
  test
  </div>

＆＃13;

转换转换不起作用

2 个答案: