在CSS循环上运行两个不同的同时动画？

我使用浮动图像，然后淡出。（有些人则相反，渐渐淡入）。它在循环中第一次工作，但是当第二次到达时，衰落就被切掉了。在CSS循环上运行两个不同的同时动画？

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
    animation: drift 15s linear infinite, 3s fadeOut 12s ease-in; 
 
} 
 

 
@keyframes drift { 
 
    from { 
 
    transform: translateX(-175px); 
 
    } 
 
    to { 
 
    transform: translateX(400px); 
 
    } 
 
} 
 

 
@keyframes fadeOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="candycane candycane_drift"></div>

来源

2017-06-06 user70848

你是什么意思 “删去了”？尝试在第二组参数中加入'infinite'到'animation'。 '动画：漂移15s线性无限，3s fadeOut 12s缓解无限;' –

@BrettEast这只是让它闪烁。 – user70848

你是对的，无限无法解释延迟，然而使用％keyframes确实 - 见Squarecandy的答案。 –

您可以考虑结合动画和设置关键帧百分比如下：

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
    animation: drift 15s linear infinite; 
 
} 
 

 
@keyframes drift { 
 
    0% { 
 
    transform: translateX(-128px); 
 
    opacity: 1; 
 
    } 
 
    66% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translateX(400px); 
 
    } 
 
}

<div class="candycane candycane_drift"></div>

这有绑两个动画，一个宽松的缺点设置，但它可能会更容易在某些情况下，这是一个好的解决方案。

来源

2017-06-06 03:17:19 squarecandy

哦完美！我也想过淡化，然后漂移，然后淡出。我认为这也可以使用更多的关键帧停止。 – user70848

延迟开始适用于所有动画的第一次迭代，因此我使用cubic-bezier来应用您正在寻找的延迟淡出效果。但是还有其他方法来构建动画，例如，您可以使用多步关键帧开始动画，以在80％关键帧进度点淡出。的多步骤动画具有以下格式：

@keyframes late-fade { 
    0% { 
    opacity: 1; 
    } 
    /* Adding a step in the middle */ 
    80% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
}

这是为得到这种效果，将溶液下面是使用立方贝塞尔而非易于在计时功能只是一个解决方案。

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
/* @keyframes duration | timing-function | delay | 
 
iteration-count | direction | fill-mode | play-state | name */ 
 
    animation: drift 15s linear infinite, fadeOut 15s cubic-bezier(.75,0,1,0) infinite; 
 
} 
 

 
@keyframes drift { 
 
    from { 
 
    transform: translateX(-175px); 
 
    } 
 
    to { 
 
    transform: translateX(400px); 
 
    } 
 
} 
 

 
@keyframes fadeOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="candycane candycane_drift"></div>

来源

2017-06-06 03:50:08 Benson

在CSS循环上运行两个不同的同时动画？

回答

相关问题