-
Sep 21st, 2023, 04:15 PM
#1
Thread Starter
PowerPoster
[RESOLVED] Can't get CSS transtion to work on a <div> tag
I am trying to pop up a <div> tag with a fade in effect using the CSS transition method and it's not working...not sure why?
Below is all my code.
Code:
#call {
top: 0;
left: 0;
display: none;
width: 22%;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
}
#callUsPopUp {
width: 300px;
height: 100px;
margin-top: -325px;
margin-bottom: auto;
padding-top: 1px;
position: relative;
border-radius: 10px;
-webkit-animation: fadein 2s; Safari, Chrome and Opera > 12.1
-moz-animation: fadein 2s; Firefox < 16
-ms-animation: fadein 2s; Internet Explorer
-o-animation: fadein 2s; Opera < 12.1
animation: fadein 5s;
background-color: #366181;
}
#callUsPopUp h2 {
color: #ffe;
margin-left: auto;
margin-right: auto;
}
#close {
margin: 0;
padding: 0;
height: 20px;
width: 70px;
font-family: arial;
padding-top: 3px;
text-align: center;
border-radius: 7px;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
background-color: #c7c5c5;
}
<section>
<div id="call">
<div id="callUsPopUp">
<h2>Call us: (406) 214-1104</h2>
<a href="#" onclick="document.getElementById('call').style.display = 'none';"><div id="close">Close</div>
</a>
</div>
</div>
</section>
function showCallUs() {
document.getElementById("call").style.display = "block";
}
-
Sep 21st, 2023, 05:35 PM
#2
Re: Can't get CSS transtion to work on a <div> tag
There may be multiple things wrong here, but I'm 99.999% sure that you can't just add random text after a semicolon on a line and expect it to be treated like a comment. All those "notes" in the callUsPopUp section having to do with different browsers should be surrounded by /* */ to denote that they are comments.
-
Sep 21st, 2023, 05:56 PM
#3
Thread Starter
PowerPoster
Re: Can't get CSS transtion to work on a <div> tag
I did a copy and paste and probably just missed them. In my actual code, they are commented out.
-
Sep 21st, 2023, 06:05 PM
#4
Thread Starter
PowerPoster
Re: Can't get CSS transtion to work on a <div> tag
I figured it out...I did have those notes uncommented...plus I did add animation in place of transitiion...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|