html - CSS3 动画 - 平滑无限动画
问题描述
我制作了一个小的图像动画,其中图像随着时间的推移改变不透明度。它工作顺利,但是当最后一张图像达到 100% 时,它直接跳到 0%,没有任何过渡。
我已经尝试过动画方向:第三张图像的交替和所有图像的延迟,但它对我不起作用。在延迟变为 0 后,延迟仅在动画周期的第一步起作用。
这是我的 CSS
.rightside .img-container img.first {
animation-name: first-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-delay: -10s; */
}
.rightside .img-container img.second {
position: absolute;
top: 0;
animation-name: second-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.rightside .img-container img.third {
position: absolute;
top: 0;
animation-name: final-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* animation-direction: alternate; */
}
@keyframes first-image {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes second-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes final-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="img-container">
<img src="Images/Apple.png" class="first turn" alt="Image Here" />
<img src="Images/Bee.png" class="second" alt="Image Here" />
<img src="Images/Cat.png" class="third" alt="Image Here" />
</div>
解决方案
对此的经典方法只是使用不同的延迟:
div {
animation-name: all;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
.first {
animation-delay: -3s;
background-color: lightgreen;
}
.third {
animation-delay: -6s;
background-color: lightblue;
}
@keyframes all {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
推荐阅读
- javascript - React js 导入大数据文件(json)
- reactjs - Gatsby build,failed Building production JavaScript and CSS bundles error
- listview - 如何创建一次只显示一个元素的水平列表?
- spring - 离线环境下无法使用 gradle bootBuildImage 构建镜像
- android - Qmetry 错误:基础驱动程序是 QAFExtendedWebDriver。此步骤需要 AndroidDriver
- python - 为什么python可执行文件的图标从'dist文件夹中消失了?
- python-3.x - SQLAlchemy 创建的测试连接
- jenkins - 詹金斯文件存在条件步骤 - 变量用法?
- javascript - 二叉搜索树是平衡的Javascript
- javascript - 传单覆盖不出现,但没有 Javascript 控制台错误