html - 如何在 CSS 中同步两个动画?
问题描述
我有一个动画球,当它向右滚动时,我需要文本淡入,当球向左滚动时,我需要文本淡出。我无法让这件事同步。
我尝试弄乱动画的不同秒数并进行 1、2、4、6、8 秒的计时,但没有一个可以同步。
我究竟做错了什么?
body {
background: #fff;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.loader {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 0;
height: 100vh;
transition: width 0s 1.4s ease;
}
.loading_overlap{
background: #007AE5;
width: 100%;
position: fixed;
height: 100%;
}
.loading_overlap_float{
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
height: 92px;
}
.bar {
position: relative;
height: 2px;
width: 500px;
margin: 0 auto;
background: #fff;
margin-top: 90px;
}
.circle {
position: absolute;
top: -30px;
margin-left: -30px;
height: 60px;
width: 60px;
left: 0;
background: #fff;
border-radius: 30%;
-webkit-animation: move 4s infinite;
opacity: 0;
}
.bar p {
position: absolute;
top: -35px;
right: -85px;
text-transform: uppercase;
color: #007AE5;
font-family: helvetica, sans-serif;
font-weight: bold;
}
@-webkit-keyframes move {
0% {left: 0; opacity: 0;}
50% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;}
75% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;}
100% {right: 100%;}
}
.bar span {
position: absolute;
top: -40px;
text-transform: uppercase;
font-family: cursive;
font-weight: bold;
font-size: 30px;
left:0;
color: #fff !important;
}
.fade-in {
-webkit-animation: fadeinout 8s infinite;
animation: fadeinout 8s infinite;
opacity: 0;
}
@-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
@keyframes fadeinout {
50% { opacity: 1; }
}
<!-- language: lang-html -->
<div class="loader loader--active">
<!-- loading spinning div -->
<div id="loader-bl">
<div class="loading_overlap d-flex align-items-center">
<div class="loading_overlap_float">
<div class="bar">
<div class="circle"></div>
<span class="fade-in">Fade IN Out</span>
<p>Loading</p>
</div>
</div>
</div>
</div>
</div>
body {
background: #fff;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.loader {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 0;
height: 100vh;
transition: width 0s 1.4s ease;
}
.loading_overlap {
background: #007AE5;
width: 100%;
position: fixed;
height: 100%;
}
.loading_overlap_float {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
height: 92px;
}
.bar {
position: relative;
height: 2px;
width: 500px;
margin: 0 auto;
background: #fff;
margin-top: 90px;
}
.circle {
position: absolute;
top: -30px;
margin-left: -30px;
height: 60px;
width: 60px;
left: 0;
background: #fff;
border-radius: 30%;
-webkit-animation: move 4s infinite;
opacity: 0;
}
.bar p {
position: absolute;
top: -35px;
right: -85px;
text-transform: uppercase;
color: #007AE5;
font-family: helvetica, sans-serif;
font-weight: bold;
}
@-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
50% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
75% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
100% {
right: 100%;
}
}
.bar span {
position: absolute;
top: -40px;
text-transform: uppercase;
font-family: cursive;
font-weight: bold;
font-size: 30px;
left: 0;
color: #fff !important;
}
.fade-in {
-webkit-animation: fadeinout 8s infinite;
animation: fadeinout 8s infinite;
opacity: 0;
}
@-webkit-keyframes fadeinout {
50% {
opacity: 1;
}
}
@keyframes fadeinout {
50% {
opacity: 1;
}
}
<div class="loader loader--active">
<!-- loading spinning div -->
<div id="loader-bl">
<div class="loading_overlap d-flex align-items-center">
<div class="loading_overlap_float">
<div class="bar">
<div class="circle"></div>
<span class="fade-in">Fade IN Out</span>
<p>Loading</p>
</div>
</div>
</div>
</div>
</div>
解决方案
使用 2s 作为持续时间,将不透明度更改为 100%,然后考虑交替:
body {
background: #fff;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.loader {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 0;
height: 100vh;
transition: width 0s 1.4s ease;
}
.loading_overlap {
background: #007AE5;
width: 100%;
position: fixed;
height: 100%;
}
.loading_overlap_float {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
height: 92px;
}
.bar {
position: relative;
height: 2px;
width: 500px;
margin: 0 auto;
background: #fff;
margin-top: 90px;
}
.circle {
position: absolute;
top: -30px;
margin-left: -30px;
height: 60px;
width: 60px;
left: 0;
background: #fff;
border-radius: 30%;
-webkit-animation: move 4s infinite;
opacity: 0;
}
.bar p {
position: absolute;
top: -35px;
right: -85px;
text-transform: uppercase;
color: #007AE5;
font-family: helvetica, sans-serif;
font-weight: bold;
}
@-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
50% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
75% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
100% {
right: 100%;
}
}
.bar span {
position: absolute;
top: -40px;
text-transform: uppercase;
font-family: cursive;
font-weight: bold;
font-size: 30px;
left: 0;
color: #fff !important;
}
.fade-in {
animation: fadeinout 2s infinite alternate;
opacity: 0;
}
@keyframes fadeinout {
100% {
opacity: 1;
}
}
<div class="loader loader--active">
<!-- loading spinning div -->
<div id="loader-bl">
<div class="loading_overlap d-flex align-items-center">
<div class="loading_overlap_float">
<div class="bar">
<div class="circle"></div>
<span class="fade-in">Fade IN Out</span>
<p>Loading</p>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- typescript - 是否可以在自己的扩展约束中使用泛型类型参数?
- jquery - ACF Medical 数据比较两种药物
- python - 没有通过 Pytorch 更新线性回归中的偏差
- html - 仅显示背景图像的顶部
- python - 赋值前引用的局部变量“intent”
- python - 通过pandas为excel中的某些单元格添加颜色 - python
- sql - 带有连接和动态表名的更新语句
- kubernetes - 使用 GKE 处理流量突然增加(多个数量级)
- amazon-s3 - Python Meta Client Copy 403 Head Object Forbidden
- node.js - 在远程机器上的 docker 容器中运行进程时是否可以挂载主机文件夹