Attach an animationend event listener to the h1 that shows the paragraph element in 5000 milliseconds with setTimeout:
const heading = document.querySelector('h1');
const paragraph = document.querySelector('p');
heading.addEventListener('animationend', function() {
console.log('showing paragraph in 5 seconds')
setTimeout(() => {
paragraph.style.display = "block"
}, 5000)
})
h1 {
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
p {
display: none;
}
<h1>I am Heading</h1>
<p>I am Paragraph</p>
Try this. setTimeout() method can execute a piece of code after a certain amount of time has passed.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<h1>Hello</h1>
<p id="para">Hey this is saruque</p>
<style>
@keyframes show {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
h1{
animation: show 5s forwards;
}
#para{
visibility: hidden;
}
</style>
<script>
setTimeout(function(params) {
document.getElementById('para').style.visibility = 'visible'
}, 5200);
</script>
</body>
</html>
You can add a delay to your animation:
p {
opacity: 0;
animation-name: fadeIn;
animation-duration: .4s;
animation-fill-mode: forwards;
animation-delay: 5s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
I have a heading <h1>I am Heading</h1> with animation properties and I want to display my <p>I am Paragraph</p> to display after heading fully loaded
In pure CSS, use animation keyframes or transitions to do this, look up either to see how that would be done.
Please add further details to expand on your answer, such as working code or documentation citations.
