html - 在背景图像动画之后创建背景颜色 CSS3 动画

标签 html css animation css-animations

我正在尝试在作为背景图像的第一个动画之后创建背景颜色的 CSS3 关键帧动画。文本动画消失后,我无法创建另一个动画。文本动画淡出后,我希望背景的不透明度变为 0.3 并再次淡出文本。以下是我所拥有的。

请在此处查看完整代码:codepen:https://codepen.io/imdaone/pen/JJrYyV

.background {
  width: 80%;
  height: 220px;
  margin: auto;
  background: url(imgs/ad-ex.png) no-repeat top left;
  background-size: 100%;
  animation: move 5s 1 linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;  
}

最佳答案

看起来您正在尝试使用序列制作动画。如果我没记错的话,你不能用纯 css 来做。您可能想尝试使用一些可以处理序列动画的 javascript 动画库。

你仍然可以使用 vanilla js 但我认为它更乏味只是为了实现你想要的

关于html - 在背景图像动画之后创建背景颜色 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44742428/

相关文章:

c# - 在 C# 中减慢动画速度

javascript - 如何重置添加/删除字段?

javascript - 制作一个 Div,它的子元素是 Javascript 中的图像

jquery - 整个应用程序中的字体大小

css - 如何按照自然方向自动显示用户文本

android - 如何强制在 Xamarin Android 项目中发现 anim 文件夹?

javascript - 如何过滤图像表

html - 创建具有水平和垂直表单字段的 Bootstrap 表单

android - 在哪里可以找到适用于 Android 的移动网络应用程序的 CSS 主题?

jquery - 新页面预加载后,如何在卸载时为页面设置动画 (jQuery)