Question

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

我已经收集了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;
}

Answer 2

你的CSS中有一些错误。

你的div有id="image"。但您选择了div.image而不是div#image
您在img上应用了动画属性，而不是您的div。

正确的CSS将是

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

这是 DEMO

Answer 3

对于<blink>元素，您的css代码的一部分，如果您相应地更改它，它就会起作用。

在jsfiddle上查看我的示例。

将css动画应用于div

3 个答案: