在背景图像动画后创建背景色CSS3动画
我正在尝试创建背景色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;
}
共有1个答案
看起来你正在尝试用序列制作动画。如果我没有错，你不能用纯CSS做。您可能想冒险使用一些javascript动画库，在那里它可以处理序列动画。
你仍然可以使用香草js，但我认为它更乏味，只是为了达到你想要的
-
问题内容： 我的网站上有一些CSS3动画，它在Safari上运行良好，但是当我在Firefox中运行该网站时，它没有动画。这是代码： 现在我注意到，当网站点击 如果我将这些更改为 然后就可以了，但是显然我要使用图像。我试过添加-moz-前缀，但是不起作用。我想念什么？有没有办法让Firefox承认 问题答案： 到目前为止，在背景图像之间进行插值的功能是一项非常新的提议，并且在浏览器中并未很好地支持
-
这是代码https://jsfiddle.net/pk7zetdu/6/链接 尝试用最新的稳定的chrome for windows打开它。 首先，当它加载时，您可以看到幻灯片（div）滚入滚出，然后图像SRC被更改，div第二次滚入新的bg（可能有一个小的img加载延迟）。一切都好！ 然后请按小提琴上的“运行”按钮并再次观看。现在，您可以看到幻灯片（div）滚入滚出，而图像SRC发生了更改，但它
-
问题内容： 假设我要在CSS中渲染箭头，箭头应具有头部，尾部和灵活的宽度，以便可以包含文本。我当然可以创建多个div来获得所需的内容，但是如何在CSS3中完成呢？ 我可以使用多个背景图片： 的HTML： 这给了我一个带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。 仅使用一张背景图像，您可以执行以下操作： 我知道这在很多方面都是可行的，但是背景颜色属性是否真的从速记定义中丢失了？ 问题
-
CSS3 背景 CSS3中包含几个新的背景属性，提供更大背景元素控制。 在本章您将了解以下背景属性： background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持
-
问题内容： 是否可以重新启动用作动画GIF ？ 考虑以下HTML： 而这种风格： 我想在动画播放每次我的类添加时间到，不只是第一次。 我希望这可以工作： 问题在于，一旦Firefox和WebKit浏览器播放一次，它们就不会再次播放背景图像GIF动画。添加/删除班级眨眼仅在第一次时有效。 问题答案： 您可以通过重新加载动画来重播gif。这对于带宽来说并不是理想的选择，尤其是在您的图像较大的情况下，但
-
问题内容： 如果选择了该面板（单击该面板），则该面板的颜色为蓝色。另外，我在该面板上添加了一个小标志（图像），它表示所选面板之前已被选中。 因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变为蓝色。 我使用css将面板设置为蓝色，使用设置背景图像。但是背景色似乎在图像上方，因此您看不