CSS动画：这会更有效吗？

Question

I have been using the following CSS to achieve a fade-in fade-out animation. It is working OK, but I can't help but think that there is a 'better' or more efficient way to do this. At the same time, would it be possible to make the fade animation a bit smoother without bloating things up too much?

Thanks in advance.

@keyframes blink {  
   0% { opacity: 1.0; }
    5% { opacity: 0.9; }
    10% { opacity: 0.8; }
    15% { opacity: 0.7; }
    20% { opacity: 0.6; }
    25% { opacity: 0.5; }
    30% { opacity: 0.4; }
    35% { opacity: 0.3; }
    40% { opacity: 0.2; }
    45% { opacity: 0.1; }
    50% { opacity: 0.1; }
    55% { opacity: 0.1; }
    60% { opacity: 0.2; }
    65% { opacity: 0.3; }
    70% { opacity: 0.4; }
    75% { opacity: 0.5; }
    80% { opacity: 0.6; }
    85% { opacity: 0.7; }
    90% { opacity: 0.8; }
    95% { opacity: 0.9; }
  100% { opacity: 1.0; }
}


@-webkit-keyframes blink {
  0% { opacity: 1.0; }
    5% { opacity: 0.9; }
    10% { opacity: 0.8; }
    15% { opacity: 0.7; }
    20% { opacity: 0.6; }
    25% { opacity: 0.5; }
    30% { opacity: 0.4; }
    35% { opacity: 0.3; }
    40% { opacity: 0.2; }
    45% { opacity: 0.1; }
    50% { opacity: 0.1; }
    55% { opacity: 0.1; }
    60% { opacity: 0.2; }
    65% { opacity: 0.3; }
    70% { opacity: 0.4; }
    75% { opacity: 0.5; }
    80% { opacity: 0.6; }
    85% { opacity: 0.7; }
    90% { opacity: 0.8; }
    95% { opacity: 0.9; }
  100% { opacity: 1.0; }
}



.blink {
  animation: blink 2s step-start 0s infinite;
  -webkit-animation: blink 2s step-start 0s infinite;
}

Answer 1

您可以简单地使用to{opacity:0}并在动画规则中使用替代方法， 此处为演示