如何制作双向CSS3动画 [英] How to make two-way CSS3 animation

问题描述

目标：
实现动画

Goal: Achieve animation that

• 应用初始样式


• 添加一些向前播放的类并保持结果样式


• 删除某些触发类向后播放并返回初始状态

我得到了什么：

@keyframes translate {
  0% {
    transform: translate3d(-100%,0,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}
.element {
  animation-direction: reverse;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-name: translate;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}
.element.is-animated {
  animation-direction: normal;
}

结果：

如上所述，它的工作原理（根据需要保留基调样式），但缺少平滑的动画。只需立即切换样式。我猜有一些规则重叠。

It works as described above, (keeps style as required) except the lack of smooth animation. Just switches styles instantly. I guess there are some rules overlapping.

有人做了相同的事情吗？对于该特定问题，我找不到合适的教程

推荐答案

如果仅在此选项之间切换两个变换属性。

If you are going to switch between only this two transform properties. Use transition instead of animation.

.element {
    transition:transform .2s ease;
    width:30px;
    height:30px;
    border:1px solid red;
    transform: translate3d(0,0,0);
 }
  .element.is-animated {
    transform: translate3d(-100%,0,0);
  }

精确地，每当您想要过渡时，都应添加删除已动画化的类。发生

Precisely you should add remove the class is-animated, whenever you want the transition to take place

这篇关于如何制作双向CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！