如何在CSS中添加类以在页面上对其进行动画

Question

我试图从中心(相反的两侧(从中心进行两个图像动画。

一个位于最左边，另一个位于最右边，中间有一些文字。

请参阅JSFIDDLE

我现在在几个网站上看到了is-visible CSS属性(例如，类似的内容(：

.image.is-visible {
    left: 0%;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}
.image {
    background-position: right;
    -webkit-transform: translateX(45%);
    -moz-transform: translateX(45%);
    -ms-transform: translateX(45%);
    -o-transform: translateX(45%);
    transform: translateX(45%);

我在JSFiddle上有我的transform: translateY(0%);，但是如何添加类，例如：is-visible在页面上对其进行动画化？

Answer 1

添加类可能是由jquery

完成的

https://api.jquery.com/addclass/

因此，您只需要定义何时应添加课程

也许在滚动时示例：

http://codepen.io/luked1uk/pen/zvgqzn

或加载文档

$( document ).ready(function() {
  $(".someclass").addClass("is-visible");
});