CODEWITHSUNDEEP
javascripthtmlcss
sebu
sebu

Reputation: 2954

How to use css @keyframes and animation properly for dropdown

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

Upvotes: 2

Views: 62

Answers (2)

Ali Hsaino
Ali Hsaino

Reputation: 141

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

Upvotes: 1

Unmitigated
Unmitigated

Reputation: 89384

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

Upvotes: 1

Related Questions