How to use css @keyframes and animation properly for dropdown-CodePudding

I am having a problem implementing the @keyframes and animation for dropdown. I have implemented blink animation for my dropdown. But, when i open the dropdownlist and try to scroll by mousepress, the scrollbar is not properly working, it's not staying with my mousepress. Please, check the code snippet and run the code snippet to understand the problem. Thanks

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

CodePudding user response：

You can animate a wrapper <div> element instead.

@keyframes blink {
  50% {
    border-color: #fff;
  }
}

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

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

CodePudding user response：

0% is the beginning of the animation, and 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

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