Results 1 to 4 of 4

Thread: [RESOLVED] Can't get CSS transtion to work on a <div> tag

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Resolved [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";
    }
    Blake

  2. #2
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,341

    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.

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    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.
    Blake

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    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...
    Blake

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width