颜色的“闪光”，使用纯​​ css 过渡

Posted 2023-03-06

【中文标题】颜色的“闪光”，使用纯​​ css 过渡

【英文标题】：A "flash" of color, using pure css transitions

【发布时间】：2013-05-23 09:54:08

【问题描述】：

当有点击事件时，我试图给用户一个“闪光”的颜色。我可以使用过渡让颜色以令人愉悦的方式出现，但是我希望颜色在 0.5 秒后消失，而不删除“活动”类。但一个要求是我不能使用 jQuery 动画，这必须在 CSS 中完成。

下面是我目前正在使用的 css。

.active
  background-color: yellow;
  -webkit-transition: background-color .5s linear;
  transition: background-color .5s linear;

我尝试指定第二个值，但我认为这不是有效的标记，因为它不起作用。

.active
  background-color: yellow;
  -webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
  transition: background-color .5s linear, background-color:transparent .5s linear;

http://jsbin.com/itivum/1/edit

【问题讨论】：

添加一个新的过渡作为淡出，延迟 5 秒

为什么要在.active 上进行转换？只需将其添加到元素 (#imADiv)

我正在使用该类，因为过渡将基于点击事件应用于元素，并且由于我将应用此转换的多个元素我正在使用一个类。

【参考方案1】：

我认为这就是您要寻找的。样本不准确。

$("#go").click(function() 
    $("#box").removeClass("demo");
    setTimeout(function() 
        $("#box").addClass("demo");
    , 1);
);

.container position: relative;

#box 
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;


@-webkit-keyframes demo 
    0% 
        background-color: Yellow;
        opacity:1;
    
    22% 
        background-color: Yellow;
    
    77% 
        background-color: Red;
    
    100% 
        background-color: #777;
    

    
.demo 
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>

希望您能从中得到您正在寻找的解决方案。

编辑：

我已经编辑了你的 JS Bin。

这正是您要寻找的东西

http://jsbin.com/imonab/1/edit

【讨论】：

非常感谢！这与我拍摄的目标有点接近。 jsbin.com/imonab/2/edit

【参考方案2】：

我根据自己的需要想出了以下内容。我想要一个颜色来确认用户操作。当您单击它时，文本会闪烁一次。它确实使用 jquery 来设置类，但不用于动画。

html：

<span style="background:lightgray" id="id">Click to flash</span>

Js：

$('#id').click(function() 
    $('#id').addClass('flash');
    setTimeout(function() 
          $('#id').removeClass('flash');
    , 500);
);

CSS：

.flash 
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.3s;

    animation-name: flash-animation;
    animation-duration: 0.3s;


@-webkit-keyframes flash-animation   
    from  background: yellow; 
    to    background: default; 


@keyframes flash-animation   
    from  background: yellow; 
    to    background: default; 

见http://jsfiddle.net/umz8t/3597/

【讨论】：

只是想说这仍然是一个完美的解决方案，六年后。干得好。作为奖励，您的 jQuery 代码实际上在大多数现代浏览器中作为 vanilla JS 完全有效。

【参考方案3】：

对 Rohith 的回答印象深刻，这里是 my own JSFiddle demo（添加了功能）

主要部分是 CSS（或者我更喜欢 SCSS）：

@-webkit-keyframes quickFlash 
  0% 
    background-color: yellow;
    opacity: 1;
  
  100% 
    background-color: inherit;
  


.quickFlash 
  //https://***.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;

而且我还发现能够让类在动画结束时自行删除很有用（这样以后如果我想再次查看动画，我可以再次添加它）：

function flashYellow(element) 
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() 
        console.log("animationend");
        $(this)
          .delay(500)// Wait for milliseconds.
          .queue(function()             
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          );
      
    );