我正在尝试使用关键帧淡入图像。我遇到的问题是图像出现然后消失,然后关键帧开始。下面是我的 html。
<div class="col-lg-6 col-md-2 col-sm-12">
<img class="iphone_image" src="images/iphone6.png" alt="iphone-mockup">
</div>
下面是我的 CSS 和关键帧:
.iphone_image {
background-image: url("images/iphone6.png");
width: 60%;
transform: rotate(25deg);
animation-name: image-appear;
animation-duration: 10s;
animation-delay: 5s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
@keyframes image-appear {
from {opacity:0;}
to {opacity: 1;}
}
我想要发生的是当网页加载时有一个过渡到图像出现的时间。任何帮助将不胜感激。
最佳答案
您必须将 opacity: 0;
添加到图像的默认状态:
.iphone_image {
background-image: url("images/iphone6.png");
width: 60%;
transform: rotate(25deg);
animation-name: image-appear;
animation-duration: 3s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
opacity: 0;
}
@keyframes image-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="col-lg-6 col-md-2 col-sm-12">
<img class="iphone_image" src="http://lorempixel.com/400/200/" alt="iphone-mockup">
</div>
关于html - 使用关键帧图像不褪色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56821204/