html - 将CSS动画应用于div

Question

我在 css 中创建了一个带有背景图像的 div，我希望 div/图像具有自动淡入和淡出效果。

我已经为这个工作收集了 css 动画，但是我不知道如何将动画的 css 与我当前的 div 的 css 结合起来。所以这就是我到目前为止所拥有的

HTML

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

CSS

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

动画 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;
}

Answer 1

您需要使用背景图片定位 div。

• #image目标 <div id="image">

• .image目标 <div class="image">

• img目标 <img>

您可以 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;
}

您还应该指定一个 background-image 而不是使用content :

注意:如果您的 div 中没有内容，您需要指定宽度和高度才能看到背景图像。默认情况下，将重复图像 - 使用 no-repeat将只显示一次图像。 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;
}