css - 如何设置多个关键帧分别连续运行无限次
问题描述
我有一个包含多个 svg 文本的 svg 容器 div,以使用 css 关键帧将第一个文本设置为淡出,将第二个文本设置为淡入。我想知道是否有办法将整个动画设置为无限播放?
<html>
<div id="fading">
<svg>
<text class="fadingA" x="20%" y="50%">Follow Me</text>
<text class="fadingB" x="13%" y="50%">On Social Media</text>
</svg>
.fadingA{
font-size: 100px; fill:#BFAE99;
stroke: #171F26; stroke-width:3px;
stroke-dasharray: 352.6px;
animation: animate1 3s ease forwards;
}
.fadingB{
font-size: 100px; fill: transparent;
stroke: #171F26; stroke-width:3px;
stroke-dasharray: 457.7px;
stroke-dashoffset: 457.7px;
animation: animate2 3s ease forwards;
animation-delay: 3s;
}
@keyframes animate1{
to{
stroke-dashoffset: 352.6px;
fill: transparent;
}
}
@keyframes animate2 {
to{
stroke-dashoffset:0px;
fill:#BFAE99;
}
}
解决方案
推荐阅读
- react-native - NPM 安装在 React Native 中导致大量错误
- c - 如何在 C 中使用 write() 函数编写整数?
- javascript - 使用带有 HTTPS Post 请求的 create 方法时出错 [ReactJs]
- php - 如何在 Laravel 6 刀片视图中的请求中获取值是否在数组内部?
- css - 使用 Rails 字符串插值在 HTML 中添加多个条件 CSS 类
- angular-material - 角度材料在表中组合相同的列值,并仅显示多行的单个值
- firebase - Flutter + firestore:过滤器列表
- html - VBA中的getattribute无法比较记录集中的值
- function - PostgreSQL 函数返回类型记录显示错误
- c++ - 如何修复这个*尝试*将美元转换为人民币和韩元的 C++ 程序?