CSS animation behavior

Question

I got this sample here is it possible to make the inside of the div which is "p" not animate but the div container animates?

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>

No, but you could simulate it with a sibbling div to the p, or you could replicate the specifc example in your question with `background-color:transparent` instead of `opacity`, it depends what exactly you want to accomplish. — Jonathan, May 10 '18 at 12:03
Possible duplicate of [How to set opacity in parent div and not affect in child div?](https://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div) — Jonathan, May 10 '18 at 12:08
What do you mean by simulate it with sibbling div to the p? The background-color:transparent wouldn't accomplish the thing I was aiming for. — Mark Anthony, May 10 '18 at 12:09
@MarkAnthony Can you select an answer to be the accepted answer? Thanks! — Jos van Weesel, May 10 '18 at 21:06

score 1 · Answer 1 · answered May 10 '18 at 12:23

The opacity you're changing applies to everything inside that div, so also the children. A way around this is to not change the opacity, but the background only. You can do this by using rgba() which includes an opacity setting instead of a solid background color like "red".

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>

score 1 · Answer 2 · answered May 10 '18 at 12:45

This is what I mean by a sibbling div to the p:

div {
    width: 100px;
    height: 100px;
    position: relative;
}

.animate {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    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><div class="animate"></div><p>Sample text here.</p></div>

Depending exactly what you are trying to accomplish, this could potentially be done with a :before as well.

div {
    width: 100px;
    height: 100px;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    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>

CSS animation behavior

2 Answers2