盒子阴影开关的过渡？答案

【问题标题】：Transition on box-shadow on-off?盒子阴影开关的过渡？
【发布时间】：2017-04-02 15:55:45
【问题描述】：

http://lucasdebelder.be/googledoodle/ 这是一个现场版本。

正如您在门户上看到的那样，它周围有一圈光晕，即box-shadow;，我想让它时断时续，这样感觉更真实，我添加了transition: box-shadow ease-in-out;，但它只是这样做开始时，页面加载后，然后一直亮着。

这是相关代码。 （portaal_links 表示左边的门户，rechts 表示右边，是荷兰语）

HTML：

<div class="portaal portaal_links"></div>
<div class="portaal portaal_rechts"></div>

CSS：

/*portaal general*/
.portaal {
    position: absolute;
    width: 100px;
    height: 200px;
    border-radius: 50px / 100px;
    bottom: 315px;
}



/*portaal left*/
.portaal_links {
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    transition: box-shadow ease-in-out;
    transition-delay: 1s;
    transition-duration: 1s;
    box-shadow: 0 0 55px #57B6FF;
    opacity: 0.75;
    left: 50px;
}


.portaal_rechts {
    background: radial-gradient(ellipse at center, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0 0 55px #FF6600;
    opacity: 0.55;
    left: 750px;
}

【问题讨论】：

使用动画代替过渡。

标签： html css css-transitions css-transforms box-shadow

【解决方案1】：

使用动画而不是过渡。

关键帧：https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

动画：https://www.w3schools.com/css/css3_animations.asp

.test {
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 200px;
  animation: testing 3s linear infinite; }

@keyframes testing {
  25% { 
    box-shadow: 0 0 55px rgba(0,0,0,0.9); }
  75% {
    box-shadow: 0 0 0 transparent; }
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

是的，我也发现了这一点并修复了它；但无论如何谢谢:)

【解决方案2】：

您可以在box-shadow 上创建一个animation，如下所示，

/*portaal general*/
.portaal {
    position: absolute;
    width: 100px;
    height: 200px;
    border-radius: 50px / 100px;
    bottom: 60px;
}



/*portaal left*/
.portaal_links {
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    transition: box-shadow ease-in-out;
    transition-delay: 1s;
    transition-duration: 1s;
    box-shadow: 0 0 55px #57B6FF;
    opacity: 0.75;
    left: 50px;
    animation:mvv 2s infinite;
}
@keyframes mvv{
   0%{
         box-shadow: 0 0 55px #57B6FF;
   }
   50%{
         box-shadow: 0 0 0px #57B6FF;
   }
}

.portaal_rechts {
    background: radial-gradient(ellipse at center, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0 0 55px #FF6600;
    opacity: 0.55;
    left: 750px;
    animation:mv 2s infinite;
}
@keyframes mv{
   0%{
         box-shadow: 0 0 55px #FF6600;
   }
   50%{
         box-shadow: 0 0 0px #FF6600;
   }
}

<div class="portaal portaal_links"></div>
<div class="portaal portaal_rechts"></div>

【讨论】：