Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS animation not working in firefox

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 13, 2016 at 4:49 am #239112
    bvkgulb
    Participant

    Hi Guys, I am trying to create a image gallery, when i click on a image it should open in a new division with zooming animation.
    I have written the code for this and its working fine in chrome, but animation is not working in firefox browser.
    Thank you guys.
    This is my code for image gallery..

    <!DOCTYPE html>
    <html lang=”en-US”>
    <head>
    <style>
    *{
    box-sizing:border-box;
    }
    #modal{
    display:none;
    background:rgba(0,0,0,0.9);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    padding:5%;
    }
    #close{
    text-align:right;
    font-size:large;
    color:white;
    }
    #image{
    width:100%;
    animation-name:zoom;
    animation-duration:1s;
    }
    @keyframes zoom{
    from {transform:scale(0.1)}
    to {transform:scale(1)}
    }

    </style>

    <body>
    image
    image

    X

    <script>
    var x=document.getElementById(“img1”);
    x.onclick=function(){
    document.getElementById(“modal”).style.display=”block”;
    document.getElementById(“image”).src=this.src;
    }

    var y=document.getElementById(“img2”);
    y.onclick=function(){
    document.getElementById(“modal”).style.display=”block”;
    document.getElementById(“image”).src=this.src;
    }

    var close=document.getElementById(“close”);
    close.onclick=function(){
    document.getElementById(“modal”).style.display=”none”;
    }
    </script>
    </body>
    </html>

    March 13, 2016 at 5:03 am #239113
    Paulie_D
    Member

    A Codepen.io demo is preferred to a poor codedump.

    March 21, 2016 at 2:09 am #239638
    VJ
    Participant

    Hi bvkgulb,

    There is no prefix’s for animation properties and keyframes, because of it animation may not working in firefox. try this code.

    #image {
    -webkit-animation: zoom 1s;
    -moz-animation: zoom 1s;
    -ms-animation: zoom 1s;
    animation: zoom 1s;
    }
    @-webkit-keyframes zoom{
    from { -webkit-transform: scale(0.1) }
    to { -webkit-transform: scale(1) }
    }
    @-moz-keyframes zoom{
    from { -moz-transform: scale(0.1) }
    to { -moz-transform: scale(1)}
    }
    @keyframes zoom{
    from {transform:scale(0.1)}
    to {transform:scale(1)}
    }

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.