本文介绍了CSS动画在一定时间后开始播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试解决这个问题已经有一段时间了，不过到目前为止还没有成功：我想使用CSS运行一个键入动画。动画必须在7秒后开始。我想不出怎么做这件事。我的代码如下所示：
HTML
<div class='background-fullwidth'>
<div class="css-typing">
This text will pop up using an typewriting effect
</div>
</div>
CSS
.css-typing {
width: 360px;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(55, end);
-o-animation: type 5s steps(50, end);
-moz-animation: type 3s steps(55, end);
padding: 10px;
}
.background-fullwidth {
width: 400px;
background-color: rgba(0, 50, 92, 0.7);
}
@keyframes type {
from { width: 0; }
to { width: 360px; }
}
@-moz-keyframes type {
from { width: 0; }
to { width: 360px; }
}
@-webkit-keyframes type {
from { width: 0; }
to { width: 360px; }
}
有谁知道如何添加此计时器-比方说动画必须在7秒后开始？从第1秒到第7秒，只需显示包装DIV(蓝色背景)。
小提琴如下所示： CSS Animation
推荐答案
您必须使用3个不同的动画属性。
- 动画延迟：帮助您解决7秒后开始动画的基本问题。
- animation-iteration-count；此属性允许您决定动画自身重复的次数。将其设置为1会将其限制为单个动画实例。
- 动画填充模式：将此属性设置为Forward将确保动画结束时宽度保持320。
CSS
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
width: 0; // So that the animation starts from 0
在https://jsfiddle.net/kaminasw/at6mbxyr/
查看小提琴这篇关于CSS动画在一定时间后开始播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！