如何实现CSS动画：仅让div容器动效生效，内部p元素不参与动画？

你遇到的问题是因为opacity是一个会被子元素继承的CSS属性，所以div的透明度动画会连带内部的p元素一起变化。要让div单独动、p保持静止，只需要给p元素显式设置一个固定的opacity值，覆盖掉继承来的动态属性就行。

修改后的CSS代码： #

div { 
  width: 100px; 
  height: 100px; 
  background-color: red; 
  -webkit-animation-name: example; 
  -webkit-animation-duration: 4s; 
  animation-name: example; 
  animation-duration: 4s; 
}
div p { 
  position: absolute; 
  top: 25px; 
  opacity: 1; /* 关键：固定p的透明度，抵消继承的动画 */
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example { 
  0%{ opacity:.4;} 
  100%{opacity:1;} 
}
/* Standard syntax */
@keyframes example { 
  0%{ opacity:.4;} 
  100%{opacity:1;} 
}

HTML代码（无需改动）： #

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

原理说明： #

CSS中，子元素的显式声明样式优先级高于从父元素继承来的样式。当div执行opacity动画时，它的opacity值会在0.4到1之间动态变化，但p元素因为自己设置了opacity: 1，就会忽略父元素的动态继承值，始终保持完全不透明，而div本身的动画效果不受任何影响。

如果以后你用其他动画属性（比如transform）遇到类似问题，思路也是一样的：给子元素设置对应的固定属性值，覆盖继承的动态效果就行。

内容的提问来源于stack exchange，提问作者Mark Anthony