CSS3 Animations , 个别部分动画长度

标签 css css-animations

我正在使用这个效果很好的 CSS3 动画脚本，但我遇到的唯一问题是我想将自定义幻灯片长度设置为其中的几个，而不是其中两个是 6 秒，我可能希望它们是 2 秒示例。

有人知道这在 CSS3 中是否可行吗？我搜索了又搜索，但仍在苦苦挣扎。

figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}

http://codepen.io/leemark/pen/vzCdo

非常感谢。

最佳答案

您所指的动画(在 CodePen 中)使用了我在我之前的一个答案中描述的方法 here .动画基本上是通过让每个元素在 6 秒的时间内动画而在剩余的 42 秒内保持空闲(其他 7 个元素完成它们的动画所花费的时间)来实现的。这是通过使实际动画(从不透明度 1 到 0)在动画持续时间本身的 12.5%(12.5% = 100% 的 6/48)完成并保持其状态几乎直到动画持续时间结束。另一件事是每个元素应该只在前一个元素(或放置在顶部的元素)完成其动画后才开始其动画。这是通过将延迟设置为 6 秒的倍数来实现的(因为所有的持续时间都相同)。

对于您的情况，由于您只希望 2 个元素在不同的持续时间内进行动画处理，因此不可能使用单个 @keyframes 规则(或者即使可能，它会变得非常复杂)。您需要根据不同的时间创建尽可能多的 @keyframes 规则。

所以，以下是我所做的:

  • 因为我们有两个不同的时间 2s 和 6s，所以我使用了两个 @keyframes 规则。 @keyframes 百分比也应该修改以满足我们的需要。对于第一个动画，每个元素必须在总共 40 秒的持续时间 (6*6s + 2*2s) 中动画 6s，因此不透明度从 1 到 0 的变化必须在 (6/40 * 100% = 15) 完成%)。由于图像实际上应该在一段时间内保持可见，我们将 0% 和 7.5%(15% 的一半)关键帧的不透明度设置为 1，然后在 15% 时将其设置为 0。第二个动画类似，实际动画将是总 40 秒持续时间中的 2 秒，因此不透明度的更改必须在 (2/40 * 100% = 5%) 完成。
  • 现在 @keyframes 规则已经完成，我们必须根据需要更改 animation 属性。正如我在上一点中指出的那样，我们的总动画持续时间为 40 秒(animation 属性中的第一个时间值)。然后对于前两个图像(:nth-child(8), :nth-child(7))持续时间是2s，所以第一个图像(第8个 child )延迟将为 0s，对于第二个(第 7 个 child )它将是 2s(第一个完成动画的时间量)，对于第 3 个(第 6 个 child )它将是 4s(前两张图像为 2*2s)，对于第 4 个(第 5 个 child )它将是 10s(2*2s + 1*6s 对于前面的元素)等等。

执行上述操作后，我们将获得所需的动画，如下面的代码片段所示。

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.css-slideshow {
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure {
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}
.css-slideshow img {
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
  position: absolute;
  top: 0;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
  transition: opacity .5s;
  opacity: 1;
}
.css-slideshow-attr {
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin: 0 auto;
}
.css-slideshow-attr a {
  color: #666;
}
.css-slideshow figure {
  opacity: 0;
}
figure:nth-child(1) {
  animation: xfade 40s 34s infinite;
}
figure:nth-child(2) {
  animation: xfade 40s 28s infinite;
}
figure:nth-child(3) {
  animation: xfade 40s 22s infinite;
}
figure:nth-child(4) {
  animation: xfade 40s 16s infinite;
}
figure:nth-child(5) {
  animation: xfade 40s 10s infinite;
}
figure:nth-child(6) {
  animation: xfade 40s 4s infinite;
}
figure:nth-child(7) {
  animation: xfade1 40s 2s infinite;
}
figure:nth-child(8) {
  animation: xfade1 40s 0s infinite;
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade1 {
  0% {
    opacity: 1;
  }
  2.5% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="css-slideshow">
  <figure>
    <img src="http://placehold.it/500x400/FF0000" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />
    <figcaption><strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far
      beyond anything the web has offered before.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/00FF00" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />
    <figcaption><strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/0000FF" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />
    <figcaption><strong>Offline &amp; Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/FF00FF" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />
    <figcaption><strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to
      microphones and cameras, to local data such as contacts &amp; events, and even tilt orientation.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/FFFF00" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />
    <figcaption><strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
    </figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/00FFFF" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />
    <figcaption><strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/330033" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />
    <figcaption><strong>3D, Graphics &amp; Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/330000" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />
    <figcaption><strong>Performance &amp; Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
  </figure>
</div>
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Images and captions are from the W3C</a>
</p>

如果你需要第一个和第二个动画 2 秒，第三个 6 秒，第四个 3 秒，剩下的 6 秒，那么你必须执行以下操作:

  • 总动画持续时间为 2*2s + 6s + 3s + 4*6s = 37s。
  • 延迟必须分别设置为 0s、2s、4s、10s、13s、19s、25s 和 31s。
  • 由于存在三个不同的持续时间，我们需要 3 个 @keyframes 规则。对于持续时间为6s的元素使用的规则，不透明度从1到0的变化必须在(6/37 * 100%)完成，对于持续时间为2s的元素使用的规则，应该在(2/37)完成* 100%)，对于持续时间为3s的元素，应该是(3/37 * 100%)。

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

.css-slideshow {
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}

.css-slideshow figure {
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}

.css-slideshow img {
  box-shadow: 0 0 2px #666;
}

.css-slideshow figcaption {
  position: absolute;
  top: 0;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s;
}

.css-slideshow:hover figure figcaption {
  transition: opacity .5s;
  opacity: 1;
}

.css-slideshow-attr {
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin: 0 auto;
}

.css-slideshow-attr a {
  color: #666;
}

.css-slideshow figure {
  opacity: 0;
}

figure:nth-child(1) {
  animation: xfade 37s 31s infinite;
}

figure:nth-child(2) {
  animation: xfade 37s 25s infinite;
}

figure:nth-child(3) {
  animation: xfade 37s 19s infinite;
}

figure:nth-child(4) {
  animation: xfade 37s 13s infinite;
}

figure:nth-child(5) {
  animation: xfade2 37s 10s infinite;
}

figure:nth-child(6) {
  animation: xfade 37s 4s infinite;
}

figure:nth-child(7) {
  animation: xfade1 37s 2s infinite;
}

figure:nth-child(8) {
  animation: xfade1 37s 0s infinite;
}

@keyframes xfade {
  0% {
    opacity: 1;
  }
  8.1% {
    opacity: 1;
  }
  16.2% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes xfade1 {
  0% {
    opacity: 1;
  }
  2.7% {
    opacity: 1;
  }
  5.4% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade2 {
  0% {
    opacity: 1;
  }
  4.05% {
    opacity: 1;
  }
  8.1% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="css-slideshow">
  <figure>
    <img src="http://placehold.it/500x400/FF0000" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />
    <figcaption><strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far
      beyond anything the web has offered before.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/00FF00" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />
    <figcaption><strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/0000FF" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />
    <figcaption><strong>Offline &amp; Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/FF00FF" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />
    <figcaption><strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to
      microphones and cameras, to local data such as contacts &amp; events, and even tilt orientation.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/FFFF00" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />
    <figcaption><strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever
      before.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/00FFFF" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />
    <figcaption><strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/330033" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />
    <figcaption><strong>3D, Graphics &amp; Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/500x400/330000" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />
    <figcaption><strong>Performance &amp; Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
  </figure>
</div>
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Images and captions are from the W3C</a></p>

关于CSS3 Animations , 个别部分动画长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40527951/

上一篇：jquery - 当特定部分在屏幕上时切换类

下一篇：css - 菜单中的 semantic-ui 流体全 Angular 输入

相关文章：

javascript - 在 Live 站点中使用 Bootstrap

jquery - CSS:在悬停时为元素设置动画

html - 针对同一个 div 的两个 CSS 动画在 Chrome 上无法运行，但在 Safari 上运行良好

html - 相对父级的相对子级 100% 宽度

javascript - 汉堡包菜单 jQuery HTML CSS 无响应

javascript - 当我无法设置 CSS 动画时，如何触发 "animationend"事件？

html - Css3 缩放动画不起作用

css - “动画方向”不起作用。为什么？

css - IE7 的相对布局问题

jQuery - 减少鼠标悬停时图像的不透明度

©2024 IT工具网  联系我们