与CSS3动画/过渡

滑动的文本，我想知道如何使这种动画：https://dimes.io/与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和这些类应用到我的元素动画不言。有谁知道为什么会发生这种情况？

来源

2015-05-29 CoderXx

这些都不是** **动画他们这种情况发生转变时，有一个状态变化。不速之客，我怀疑他们也是Javascript挂钩 –

@Paulie_D感谢您的更新。正如你所说，最有可能有一些Javascript挂钩，因为我不知道它是如何工作的。 – CoderXx

过渡：所有 1000ms的800ms的立方贝塞尔（0.19，1，0.22，1）;

的所有值告诉所有（animateable）CSS值应包括在过渡。您还需要指定开始/结束值的值。

3210

我从100像素至200像素动画这里的时候，我加入.animate类。

来源

2015-05-29 08:36:12 wintercounter

我不知道你指的是什么动画，但您使用了错误的参数过渡：

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);。不能说你的代码中有其他错误，尽管你没有提供它。

来源

2015-05-29 08:36:20

我是Dimes的联合创始人，并且编写了该代码。我只是为了节省时间和标记而写出来的。由于@ dominic-tobias和其他人都表示，它只是一个转换，即定时功能（您可以看到代码中的时间差异）。

@ wintercounter的答案显示了如果要全部写出它应该如何使用它。

有很多种方法达到的效果我只有对你最简单的方法可能是使用像丹伊甸园的animate.css

来源

2015-09-29 13:48:08 Simon

与CSS3动画/过渡

回答

相关问题