I have an image that disappears (via javascript) and then fades out (via CSS) on my page, and then once this happens I have a div with text that appears once the image disappears. What I am hoping to do and am having problems with is making the text that appears after 5 seconds appear with a fade in ... html/js as follows:
<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
</script>
</head>
<body>
<div id="welcomeImage" class="fadeout">
<script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</div>
<div id="introText" class="animated fadeIn">
<p>Div with Text</p>
</div>
<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.visibility = "visible";}
setTimeout("showIt()", 5000); </script>
</body>
</html>
CSS:
.fadeout {
animation: fadeOut 1s forwards;
animation-delay: 3s;
}
@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
/* One option I tried that did not work out
.fadein {
animation: fadeIn 3s forwards;
animation-delay: 5s;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
*/
/*my most current attempt at fadein through CSS */
.animated {
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 5;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
#introText {
width: auto;
padding: 100px;
visibility: hidden;
text-align: center;
height: auto;
}
'''
Am i able to add a fade-in transition into the visibility script? I tried doing a fade in with CSS but could not get it to work.
I do not know the JS to add it to my script and have tried searching for it but could not find anything for my specific situation.
If anyone sees anything I could fix in my CSS to make it fade in properly (maybe a timing issue?) or know how I can include a fade-in in my script making the text visible it would be much appreciated!
Thanks!!
question from:
https://stackoverflow.com/questions/65546831/fade-in-after-timed-visibility-through-javascript-using-css-or-js 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
