javascript - 横幅上的移动标题动画
问题描述
我的英雄图像内容有一个动画,从 3/4 帧开始。但是,当标题再次重复时,它会从第 3/4 帧开始。
我希望从第二次到最后一个字母离开框架时,“下一个”句子的第一个字母已经在另一端开始了。你能帮我解决这个问题吗?
这是网站链接:http: //54.91.174.201/
@keyframes home_hero1 {
0% {
margin-left: 30%;
}
100% {
margin-left: -4400px;
}
}
@keyframes home_hero2 {
0% {
margin-right: 30%;
}
100% {
margin-right: -4400px;
}
}
.heading_h1 {
font-size: 150px;
letter-spacing: 12.5px;
position: absolute;
bottom: 50px;
left: 0;
line-height: 2;
white-space: nowrap;
-moz-animation: home_hero1 21s linear 0s infinite;
-webkit-animation: home_hero1 21s linear 0s infinite;
}
.heading_h2 {
font-size: 150px;
letter-spacing: 12.5px;
position: absolute;
top: 50px;
right: 0;
line-height: 1.5;
white-space: nowrap;
-moz-animation: home_hero2 23s linear 0s infinite;
-webkit-animation: home_hero2 23s linear 0s infinite;
}
<div class="inner-hero-left">
<h2 class="heading_h1">
<span class="underline--magical">98% PLANT & NATURALLY DERIVED INGREDIENTS*</span>
</h2>
<h2 class="heading_h2"><span class="underline--magical show-on-scroll">98% PLANT & NATURALLY DERIVED INGREDIENTS*</span>
</h2>
</div>
解决方案
推荐阅读
- reactjs - PWA React - 检查一个人是否在指定区域内的最简单方法?
- javascript - 三角形分隔线
- java - java.sql.SQLException:用户'root'@'localhost'的访问被拒绝-无法创建与mysql的连接
- javascript - 如何对 PHP 表进行文本转语音
- amazon-web-services - 在多个 EC2 实例上使用 HTTPS,并更改公共 IPv4 DNS
- reactjs - 我正在尝试将 DatePicker 组件插入到我的项目中,但出现错误
- ibm-cloud - 是否有适用于 IBM Cloud PowerPC Virtual 服务器实例的 API - power-iaas?
- bamboo - SSH 远程文件执行
- javascript - 如何从其键值对更改对象的值并将这个新项目迭代地添加到同一个对象?
- python - 根据字典中的值列表在 pandas 中创建一个新列