How would I make it so when an animation ends (css), a new file opens or page opens
Question
I was wondering if it was possible to make a function, or a page, load after the animation runs. For example this code would run the animation, then a new file would open that was a different coded website. This would allow for a cool introduction to the website, then the actual website. This could also happen in the same file. I would prefer only to use js, html, and css. Thank you.
* { padding: 0; margin: 0; font-family: sans-serif; } body { background: #000; } .container { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .container span { text-transform: uppercase; display: block; } .text1 { color: red; font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: black; position: relative; animation: text 7s 1; } .text2 { color: aqua; animation: hats 13s; } @keyframes text { 0% { color: red; margin-bottom: -40px; letter-spacing: 8px; } 20% { color: yellow; } 30% { letter-spacing: 25px; margin-bottom: -40px; } 40% { color: green; } 50% { letter-spacing: 25px; margin-bottom: -40px; } 60% { color: aqua; } 80% { color: purple; } 85% { letter-spacing: 8px; margin-bottom: -40px; } 100% { color: red; } }
<div class='container'> <span class='text1'>Welcome</span> <span class='text2'>Hatsonboats58</span> </div>
3 answers
solution1
2 ACCPTED 2020-03-10 02:50:20
You can use animationend event listener then toggle the display of your introduction div and the actual div content:
const animationCont = document.querySelector('.container'); const mainCont = document.querySelector('.main-content'); animationCont.addEventListener('animationend', () => { animationCont.style.display = "none"; mainCont.style.display = "block"; });
* { padding: 0; margin: 0; font-family: sans-serif; } body { background: #000; } .main-content { z-index: 0; display: none; color : #fff; } .container { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; } .container span { text-transform: uppercase; display: block; } .text1 { color: red; font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: black; position: relative; animation: text 7s 1; } .text2 { color: aqua; animation: hats 13s; } @keyframes text { 0% { color: red; margin-bottom: -40px; letter-spacing: 8px; } 20% { color: yellow; } 30% { letter-spacing: 25px; margin-bottom: -40px; } 40% { color: green; } 50% { letter-spacing: 25px; margin-bottom: -40px; } 60% { color: aqua; } 80% { color: purple; } 85% { letter-spacing: 8px; margin-bottom: -40px; } 100% { color: red; } }
<div class='container'> <span class='text1'>Welcome</span> <span class='text2'>Hatsonboats58</span> </div> <div class='main-content'> <p>Hello Im the real content!!</p> </div>
solution2
0 2020-03-10 02:28:28
See https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
You're looking for one of the following events:
webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
OR better yet as posted above onanimationend . See also https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event
solution3
0 2020-03-10 02:43:34
What if you did something like this where I use a modal.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Auto Loading Bootstrap Modal on Page Load</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $("#myModal").modal('show'); setTimeout(function() { // code to close the modal $("#myModal").modal('hide'); }, 10000); }); </script> </head> <body> <style> * { padding: 0; margin: 0; font-family: sans-serif; } .container { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .container span { text-transform: uppercase; display: block; } .text1 { color: red; font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: black; position: relative; animation: text 7s 1; } .text2 { color: aqua; animation: hats 13s; } @keyframes text { 0% { color: red; margin-bottom: -40px; letter-spacing: 8px; } 20% { color: yellow; } 30% { letter-spacing: 25px; margin-bottom: -40px; } 40% { color: green; } 50% { letter-spacing: 25px; margin-bottom: -40px; } 60% { color: aqua; } 80% { color: purple; } 85% { letter-spacing: 8px; margin-bottom: -40px; } 100% { color: red; } } .modal-backdrop { opacity:1 !important; } </style> <div><h1>This is my Webpage!</h1></div> <div id="myModal" class="modal fade"> <div class='container'> <span class='text1'>Welcome</span> <span class='text2'>Hatsonboats58</span> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.