Question

我一直在使用以下CSS来实现淡入淡出动画。它工作正常，但我不能帮助，但认为有一个更好的＆＃39;或更有效的方法来做到这一点。与此同时，是否有可能使淡入淡出的动画更平滑而不会过度膨胀？

提前致谢。

@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}并在动画规则中使用alternate here is the demo

CSS动画：这可能更有效吗？

1 个答案: