问题
我有两个css关键帧动画,我在一个元素上运行：
- .fade-bg {
- animation-name: fade-bg-1,fade-bg-2;
- animation-delay: 0,6s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- }
动画定义如下：
- @keyframes fade-bg-1 {
- from {
- opacity: 0;
- background-image: url(image-1.jpg);
- }
- 50% {
- opacity: 1;
- background-image: url(image-1.jpg);
- }
- to {
- opacity: 0;
- background-image: url(image-1.jpg);
- }
- }
- @keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg */ }
上面的工作,但当它到达第二个动画时,它不断重复该动画,不会循环回fade-bg-1.
我尝试了许多不同的动画方向组合,但无济于事.
问题
如何使动画返回到fade-bg-1并重复自身？
这个例子
解决方法
没有JavaScript,我认为你不能.但是,您可以使用单个关键帧动画实现相同的效果.
- .fade-bg {
- animation-name: fade-bg;
- animation-delay: 0;
- animation-iteration-count: infinite;
- animation-direction: forward;
- }
- @keyframes fade-bg {
- 0% {
- opacity: 0;
- background-image: url('image-1.jpg');
- }
- 25% {
- opacity: 1;
- background-image: url('image-1.jpg');
- }
- 50% {
- opacity: 0;
- background-image: url('image-1.jpg');
- }
- 51% {
- opacity: 0;
- background-image: url('image-2.jpg');
- }
- 75% {
- opacity: 1;
- background-image: url('image-2.jpg');
- }
- 100% {
- opacity: 0;
- background-image: url('image-2.jpg');
- }
- }
