CODEWITHSUNDEEP
htmlcss
user3649195
user3649195

Reputation: 115

Applying css animation to div

I've created a div with a background image in css and I want the div/image to have an automatic fade in and fade out effect.

I've gathered the css animation for this to work however I have no idea as to how I can combine the css of the animation with my current div's css. So here is what I have so far

HTML

<div id="image"></div>

CSS

div.image {
content:url(http://www.google.com/images/srpr/logo3w.png);
float:left;
}

Animation CSS

    @-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}

Upvotes: 2

Views: 193

Answers (3)

misterManSam
misterManSam

Reputation: 24692

You need to target the div with the background image.

  • #image targets <div id="image">

  • .image targets <div class="image">

  • img targets <img>

You can read more on CSS selectors over at MDN.

Have an example!

CSS

#image {
    -webkit-animation: blink 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 3s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 3s;
    -o-animation-iteration-count: infinite;
}

You should also specify a background-image instead of using content:

Note: If there is no content in your div you need to specify a width and height in order to see the background image. By default, the image will be repeated - using no-repeat will have the image only displayed once. Read more on CSS backgrounds here.

Same example but with a background image.

div#image {
    background:url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
    height: 95px;
    width: 280px;
    float:left;
}

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8521

You have some errors in your CSS.

  1. Your div have id="image". But you selected div.image instead of div#image
  2. You applied the animation property on img instead on your div.

The proper CSS would be 

div#image {
    content:url(http://www.google.com/images/srpr/logo3w.png);
    float:left;
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Here is a DEMO

Upvotes: 1

Alex
Alex

Reputation: 4774

A part of your css code if for the <blink> element and it works if you change it accordingly.

Take a look at my example on jsfiddle.

Upvotes: -1

Related Questions