Help Please... Css Animations Giving Me Probs - Programming - Nairaland
Nairaland Forum / Science/Technology / Programming / Help Please... Css Animations Giving Me Probs (1075 Views)
How To Add On Scroll Animations To Your Website Using Animate.css And Wow.js / This Php Server Remote Addr Is Giving Me Different Device Ip Address / After 10days Of Coding With Html, Css And Javascript Forum4africa Is Ready (2) (3) (4)
| Help Please... Css Animations Giving Me Probs by marvzkiddx(m): 8:07pm On Sep 28, 2017 |
please... this is a js popup.. but i wanna add animations to it... ao the popup become more beautiful... like d popup fades b4 getting clear... things like dat sha... please help <!DOCTYPE html> <html> <head> </head> <body> <!--na d popup code be this jawe:--> <script> function eniola(){ document.getElementById('marvin').innerHTML="<b><center>Hi, my name is Olorunjuwon Eniola Moses.<p>This tin has been giving me confirm wahala. all day but finally..... with perseverance and confirm thinking... I finally sorted it out.. </center></b>"; document.getElementById('yunqmarv').style.display="block";document.getEleme('olorunjuwon').style.display="block"; }//end eniola JS function function seyifunmi(){ document.getElementById('yunqmarv').style.display="none"; document.getElementById('olorunjuwon').style.display="none"; } </script> <div onclick="seyifunmi();" id="olorunjuwon" style="position:absolute; width:100%; height:100%; top:0px; left:0px;background-image:url(bg.psd);background-size:cover;background-position:center;opacity:0.4;z-index:9999;display:none"></div> <div id="yunqmarv" style="position:absolute; width:300px; height:150px; top:150px; left:50%; margin-left:-155px;border: 2px solid purple;background-color:white;z-index:99999;padding:15px;-webkit-border-radius:5px;border-radius:10px;display:none;"><span onclick="seyifunmi();" style="position:absolute;top:5px;right:5px;color:red;fweight:bold;cursor:pointer" title="Close Window!">x</span><span id="marvin"></span></div> <center><li style=" font-size:50px;"><a href="#" onclick="eniola()">Click to see</a></li> </center> </body> </html> |
| Re: Help Please... Css Animations Giving Me Probs by Olarababy(f): 12:34am On Sep 29, 2017 |
Scripts suppose to be in the head section |
| Re: Help Please... Css Animations Giving Me Probs by agwaisrael(m): 9:35am On Sep 29, 2017 |
Your code is not clear, but I don't think display is animatable. From stackoverflow: You can concatenate two transitions or more, and visibility is what comes handy this time. div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; } <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> (Don't forget the vendor prefixes to the transition property) 1 Like |
| Re: Help Please... Css Animations Giving Me Probs by CenturyCoder: 9:22pm On Sep 22, 2020 |
I don't think display is animatable and even if it is, that animation might look weird. why not reduce the opacity to 0 and then set the pointerEvents to none, that way, the element will appear gone and its functionality if it is a button would not work, you would not be able to tap it. sorry I wrote like this, I couldn't just read through the post, didn't look clean.. |
(1) (Reply)
Ibadan Residents Only / Help Me Review My Website / Python IDE For Android Users(including Android Apps To Learn Python).
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 16 |