使用CSS3动画/转场的滑动文本

Question

我想知道如何制作这样的动画：https://dimes.io/

我正在尝试弄清楚他们是如何制作标题和段落动画的。然而，我做了一些“幕后”的研究，发现了这些css片段

  .ani-1s-200ms {
  -webkit-transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-400ms {
  -webkit-transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 400ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-600ms {
  -webkit-transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ani-1s-800ms {
  -webkit-transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1000ms 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

当我尝试添加类似或相同的css并将这些类应用到我的元素时，动画不会生成。有人知道为什么会这样吗？

Answer 1

立方转换： 1000ms 800ms立方贝塞尔(0.19，1，0.22，1)；

all 值指示所有(可设置动画的)CSS值都应包含在过渡中。您还需要指定值的起始值/结束值。

.cls {
    width: 100px;
    transition: all 1s ease-out;
}

.cls.animate {
    width: 200px;
}

当我添加.animate类时，我的动画效果是从100px到200px。

Answer 2

我不确定您所指的是哪种动画，但您使用的转换参数是错误的：

transition: <property> <duration> <timing-function> <delay>;

因此，它将是一个持续时间值all 1000ms cubic-bezier(0.19, 1, 0.22, 1);，而不是all 1000ms 200ms cubic-bezier(0.19, 1, 0.22, 1);。不能说你的代码中是否有其他错误，因为你没有提供它。

Answer 3

我是Dimes的联合创始人，并编写了这些代码。我把它写出来只是为了节省时间和标记。正如@dominic-tobias和其他人所说的，这只是一个过渡，即计时函数(你可以在代码中看到计时差异)。

@wintercounter的答案显示了如果您要完整地编写它，应该如何使用它。

有很多方法可以达到我的效果，但对你来说最简单的方法可能是使用丹·伊登的animate.css