1

我有一个问题，我希望我可以只使用 CSS3 动画来实现，但如果需要使用 jQuery 动画，那也没关系。:]

我有一张云从右向左滑动的图像，上面有一个无限循环。这很好用，我很喜欢 CSS3 动画，但我找不到任何关于向它们添加垂直动画的信息。

如果这可以实现我的云图像稍微上下移动，那么随机是可能的，所以它们不仅仅是直接滑过，那将是史诗般的。我是 CSS3 动画的新手，所以我已经阅读了一些内容，keyframes但是，我尝试使用基于关键帧的几次%，我并没有成功地让它们工作。

这是我需要做的还是最好只使用 jQuery 来达到我想要的效果。

CSS

.clouds {
    width: 20em;
    position: absolute;
    top: 1em;
    -webkit-animation-name: Clouds;
    -webkit-animation-duration: 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: Clouds;
    -moz-animation-duration: 50s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: Clouds;
    -ms-animation-duration: 50s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
}

@media only screen and (max-width: 680px) {
  .clouds {
    width: 25%;
    top: 3em;
  }
}

/* Clouds CSS3 animations */

@-webkit-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-moz-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-ms-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}

/* End Clouds CSS3 Animation */

JSFIDDLE

对此的任何意见将不胜感激，如果您需要其他任何信息，请告诉我！

我的投资组合链接

4

1 回答 1

2

%基于关键帧应该可以工作：JSFIDDLE

我将动画分成两部分以使其更易于理解。

@-webkit-keyframes Clouds-h {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
    }
}

@-webkit-keyframes Clouds-v {
    from {
        top: 3em;
    }
    50% {
        top: 2em;
    }
    to {
        top: 3em;
    }
}

并将它们放在一行中：

-webkit-animation: Clouds-h 50s linear infinite, Clouds-v 10s ease-in-out infinite;

通过这种方式，您可以轻松地对动画进行调整以制作复杂的动画。就像为云大小添加第三个动画一样。

于 2013-10-19T17:48:11.930 回答