SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Image animation with css

    I'm playing around with some image effects with css but it is not working. The first image is showing but it is not animating with the second. What am I doing wrong?
    I have the following html is the head:

    <head>
    div
    {
    animation: clouds 5s;
    -moz-animation: clouds 5s; /* Firefox */
    -webkit-animation: clouds 5s; /* Safari and Chrome */
    -o-animation: clouds 5s; /* Opera */
    }
    </head>

    and the following css:

    @keyframes clouds
    {
    from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
    to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
    }

    @-moz-keyframes clouds /* Firefox */
    {
    from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
    to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
    }

    @-webkit-keyframes clouds /* Safari and Chrome */
    {
    from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
    to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
    }

    @-o-keyframes clouds /* Opera */
    {
    from {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion1.jpg);}
    to {background-image: url(http://localhost/wordpress/wp-content/uploads/2013/01/bg_fusion2.jpg);}
    }


    Many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,829
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The above code seems to work ok in Chrome. AFAIK Firefox doesn't support the cross-fade between different images.

    You could use transitions to change one image into another but its only triggered on hover.

    http://www.pmob.co.uk/temp/dissolve.htm


Bookmarks

Posting Permissions

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