@keyframes fadeInUp {
from {
opacity: 0%;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 100%;
-webkit-transform: none;
transform: none;
}
}
.fadeIn {
margin-top: 2rem;
opacity: 0;
animation: fadeInUp 1s ease-in-out 0s forwards;
-webkit-animation-name: fadeInUp 1s ease-in-out 0s forwards;
animation-delay: .7s;
-webkit-animation-delay: .7s;
&.second {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
}
<div class="col-md-10 px-3 fadeIn">
<h1>
Welcome to my personal website......etcetcetc
</h1>
</div>
该代码应使我将其应用的文本块在延迟3秒后向上滑动,并且可以在Chrome和Android Chrome上运行,但不能在具有Safari的iPad上运行。任何想法为什么会这样?
我正在与Bootstrap一起使用,如果这有任何改变。
创建Web应用程序时,请注意并非每个浏览器都能识别每个元素。这是一个链接,您可以在其中找到浏览器支持元素:enter link description here