Css 动画队列

标签 css css-animations

我有一个麻烦的任务。默认情况下应隐藏图像并显示按钮。我想显示图像和隐藏按钮,但是当一个动画结束时,第二个应该开始。过渡应持续 1 秒。如何制作?

所有代码: https://jsfiddle.net/169vuuk8/

HTML代码:

<div class="showSingle" itemprop="1">
  <img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
  <button class="button">button </button>
</div>

最佳答案

看起来你只需要 transition-delay 第二个动画的 css 属性:https://developer.mozilla.org/en/docs/Web/CSS/transition-delay

你可以在 js 中使用 transitionend 事件,但这里并不需要它:https://developer.mozilla.org/en/docs/Web/Events/transitionend

关于Css 动画队列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44884613/

相关文章:

css - 如何旋转 svg 组并保持其相对位置?

javascript - 动画在 FF 和 IE 上卡住,但在 Chrome 上不会

javascript - 使用 jQuery 使 li 中的图像随着悬停而消失

javascript - 将类应用于 HTML 中被 AJAX 调用的 div?

css - 移动 Web 表单 - 可以使用 CSS 和 HTML 为 Android 和 iPhone 自定义单选按钮样式吗?

javascript - 如果元素最初显示 : none,则 CSS3 动画不会在 Opera 中启动

CSS 动画宽度从 0px 到内联 css 定义的 % 值

angular - CSS3 动画不适用于 Angular 4

html - 如何使用flexbox对齐一些 block

javascript - 在网页中心显示 div