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 cubic-bezier（0.19,1,2.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 200ms cubic-bezier(0.19, 1, 0.22, 1);不是all 1000ms cubic-bezier(0.19, 1, 0.22, 1);，而是一个持续时间值{{1}}。如果您的代码中没有其他错误，则无法说明，因为您没有提供它。

Answer 3

我是Dimes的联合创始人并编写了该代码。我这样写出来只是为了节省时间和标记。正如@ dominic-tobias和其他人所说，它只是一个转换，即时序功能（你可以看到代码中的时序差异）。

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

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

使用CSS3动画/过渡滑动文本

3 个答案: