html - CSS 动画行为

Question

我在这里得到了这个示例，是否可以让“p”的 div 内部不是动画，而是 div 容器动画？

div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

div p {
	position: absolute;
    top: 25px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%{	opacity:.4;}
	100%{opacity:1;}
}

/* Standard syntax */
@keyframes example {
    0%{	opacity:.4;}
	100%{opacity:1;}
}

<div><p>Sample text here.</p></div>

Answer 1

您正在更改的不透明度适用于该 div 内的所有内容，子项也是如此。解决这个问题的方法是不改变不透明度，而只改变背景。您可以使用 rgba() 来做到这一点，它包含一个 opacity 设置，而不是像“红色”这样的纯色背景。

div {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 1);
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

div p {
	position: absolute;
    top: 25px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%{background-color: rgba(255, 0, 0, 0.4);}
	100%{background-color: rgba(255, 0, 0, 1);}
}

/* Standard syntax */
@keyframes example {
    0%{background-color: rgba(255, 0, 0, 0.4);}
	100%{background-color: rgba(255, 0, 0, 1);}
}

<div><p>Sample text here.</p></div>