带CSS3动画/转换的滑动文本

我想知道如何制作这种动画：

我试图弄清楚他们是如何制作这些标题和段落动画的。然而，我在“幕后”做了一些研究，发现了那些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并将这些类应用于我的元素时，动画就不会生成。有人知道为什么会这样吗

过渡：all1000ms 800ms立方贝塞尔（0.19,1,0.22,1）

all值表示所有（可设置动画的）CSS值都应包含在转换中。您还需要指定值开始/结束值

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

.cls.animate {
    width: 200px;
}

---

当我添加

.animate

类时，我正在从100px设置动画到200px。

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

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

转换：；

---

因此，代替

所有1000ms 200ms立方贝塞尔（0.19,1,0.22,1）它将是一个持续时间值
所有1000ms立方贝塞尔（0.19,1,0.22,1）。因为您没有提供代码，所以无法说明代码中是否有其他错误。
我是Dimes的联合创始人，并编写了该代码。
我这样写只是为了节省时间和标记。
正如@dominic tobias和其他人所说，这只是一个过渡，即计时功能（你可以在代码中看到计时差异）

@wintercounter的回答显示了如果你要完整地写它，应该如何使用它

有很多方法可以达到我的效果，但最简单的方法可能是使用Dan Eden的
这些不是动画，它们是状态更改时发生的过渡。顺便说一下，我怀疑它们也是Javascripthooks@Paulie_D谢谢你的更新。正如您所说，很可能存在一些Javascript钩子，因为我无法理解它是如何工作的。