javascript 如何正确使用css @keyframes和动画进行下拉

628mspwn 于 2022-12-21 发布在 Java

关注(0)|答案(2)|浏览(150)

我在实现下拉列表的@keyframes和动画时遇到了问题。我已经为下拉列表实现了 Flink 动画。但是，当我打开下拉列表并尝试通过鼠标按键滚动时，滚动条无法正常工作，它无法与我的鼠标按键保持一致。请检查代码段并运行代码段以了解问题。谢谢

@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>

JavaScript

来源：https://stackoverflow.com/questions/74871390/how-to-use-css-keyframes-and-animation-properly-for-dropdown

2条答案

按热度按时间

s4n0splo1#

您可以改为设置 Package 器<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>

赞(0）回复(0）举报 2022-12-21

hrysbysz2#

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;
}

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 如何正确使用css @keyframes和动画进行下拉

2条答案

相关问题

热门标签

最新问答