如何正確使用 css @keyframes 和動畫進行下拉

Question

我在實現下拉菜單的@keyframes 和動畫時遇到問題。 我已經為我的下拉菜單實現了閃爍動畫。 但是，當我打開下拉列表並嘗試通過鼠標按下滾動時，滾動條無法正常工作，它沒有停留在我的鼠標按下上。 請檢查代碼片段並運行代碼片段以了解問題。 謝謝

 @keyframes blink { 50% { border-color: #fff; } }.blink { border: 3px solid #0061a0; font-weight: bolder; animation: blink 1s infinite; animation-iteration-count: infinite; }

 <select name="birthYear" class="blink"> <option>YYYY</option> <option value="2022">2022</option> <option value="2021">2021</option> <option value="2020">2020</option> <option value="2019">2019</option> <option value="2018">2018</option> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> </select>

Answer 1

您可以為包裝<div>元素設置動畫。

 @keyframes blink { 50% { border-color: #fff; } }.blink { border: 3px solid #0061a0; font-weight: bolder; animation: blink 1s infinite; animation-iteration-count: infinite; }

 <div class="blink" style="display: inline-block;"> <select name="birthYear"><option>YYYY</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option></select> </div>

Answer 2

0% 是動畫的開始，100% 是動畫完成的時候。

為了獲得最好的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

@keyframes blink {
  0%{
    border-color: #0061a0;
  }
  100% {
    border-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  animation: blink 1s infinite;
  animation-iteration-count: infinite;
}