Question

我试图从中心动画两幅图像，彼此相对的两侧。

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

我现在在一些网站上看到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");
});

如何在CSS中添加一个类来为页面上的动画设置动画？

1 个答案: