html - CSS中文本阴影的动画

Question

我有以下代码，我在 CSS 中制作移动 div 的动画。但我还想为文本的阴影设置动画，以某种方式模拟我的文本的权重:

div#main {
    background-color: #2E2E2E;
}

div#lblCaption {
    margin-bottom: 0px;
    color: #C7C7C7;}
    
div#NodeCaptionContainer{     
    animation-duration: .7s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeAndScale {
    from {
        opacity: 0;
		transform: scale(.9, .9);
		text-shadow: 0 0 .75px rgb(255, 255, 255), 0 0 .75px rgb(255, 255, 255);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
		text-shadow: 0 0 .0px rgb(255, 255, 255), 0 0 .0px rgb(255, 255, 255);
    }
}

<div id="main">
  <div id="NodeCaptionContainer">
          <div id="lblCaption" class="pretty p-default p-thick p-pulse"><p class="noMargin">&nbsp;&nbsp;&nbsp;&nbsp;Node: 1:9 &nbsp;&nbsp;&nbsp;&nbsp; Type: Function &nbsp;&nbsp;&nbsp;&nbsp; Read: 480B &nbsp;&nbsp;&nbsp;&nbsp; Write: 1088B &nbsp;&nbsp;&nbsp;&nbsp; </p></div> 
  </div> 
</div>

问题是平移的动画是由 animation-timing-function 顺利完成的，但阴影的动画却没有。我还想平滑阴影过渡。有没有一种方法可以平滑 CSS 中的阴影过渡？

Answer 1

https://jsfiddle.net/Liamm12/6d9p5uun/67/

在 NodeCaptionContainer 中定义了 text-shadow 并使用 forwards 来避免返回到与 NodeCaptionContainer 相同的代码然后使用 keyframes

隐藏它

div#main {
    background-color: #2E2E2E;
}

div#lblCaption {
    margin-bottom: 0px;
    color: #C7C7C7;}
    
div#NodeCaptionContainer{     
    -webkit-animation: fadeAndScale .7s ease-in-out forwards;
    animation: fadeAndScale .7s ease-in-out forwards;
    text-shadow: 0 0 .75px red, 0 0 .75px red;
}
@keyframes fadeAndScale {
    from {
        opacity: 0;
		transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
		text-shadow: 0 0 0 rgb(255, 255, 255);
    }
}

<div id="main">
  <div id="NodeCaptionContainer">
          <div id="lblCaption" class="pretty p-default p-thick p-pulse"><p class="noMargin">&nbsp;&nbsp;&nbsp;&nbsp;Node: 1:9 &nbsp;&nbsp;&nbsp;&nbsp; Type: Function &nbsp;&nbsp;&nbsp;&nbsp; Read: 480B &nbsp;&nbsp;&nbsp;&nbsp; Write: 1088B &nbsp;&nbsp;&nbsp;&nbsp; </p></div> 
  </div> 
</div>