CSS动画以不同的速率淡入和淡出并暂停答案

【问题标题】：CSS animation to fade in and out at different rates with a pauseCSS动画以不同的速率淡入和淡出并暂停
【发布时间】：2021-02-19 09:11:52
【问题描述】：

我正在尝试获得我设计的淡入淡出徽章，但我对 css 动画缺乏一些了解。我想要的是 2s 淡入、10 秒暂停和 2s 淡出。

现在我有一个 2s 淡入淡出。但接下来的部分会是什么？

我看过here、here、here、here、here、and here，但没有什么能真正涵盖我正在寻找的内容，以及我所做的任何修改把一切都搞砸了。这在纯 css 中是否可行？

  .fadeInAndOut {
    -webkit-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
  }

  @-webkit-keyframes fadeinout {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
  }

  @keyframes fadeinout {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
  }

我也尝试过更复杂的东西，但是涉及到很多闪烁，而且它似乎也在循环中based off this

  @-webkit-keyframes fadein {
    0% {
      opacity: 0;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes fadein {
    0% {
      opacity: 0;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @keyframes fadein {
    0% {
      opacity: 0;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }

  }


  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
  @-moz-keyframes fadeOut {
    0% {
      opacity: 1;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }

  }

  .fadeInAndOut{
    -webkit-animation: fadein 1.9s ease-in-out 5s 1,
    fadeOut 1.9s ease-in-out 5s 1 ;
    -moz-animation: fadein 1.9s ease-in-out 5s 1,
    fadeOut 1.9s ease-in-out 5s 1 ;
    animation: fadein 1.9s ease-in-out 5s 1,
    fadeOut 1.9s ease-in-out 5s 1 ;
  }

【问题讨论】：

标签： css css-animations

【解决方案1】：

你可以通过一个 CSS 动画来实现它。

.el {
  width: 100px;
  height: 100px;
  background-color: green;
}

.fadeInOut {
    opacity: 0;
   -webkit-animation: fadeInOut 14s;
   animation: fadeInOut 14s;
  }

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    14% {
      opacity: 1;
    }
    
    86% {
        opacity: 1;
    }
  
    100 {
      opacity: 0;
    }
}

@-webkit-keyframe fadeInOut {
    0% {
        opacity: 0;
    }
    14% {
      opacity: 1;
    }
    
    86% {
        opacity: 1;
    }
  
    100 {
      opacity: 0;
    }
}

https://codepen.io/callmesupercookie/pen/xxOagdo

【讨论】：

【解决方案2】：

你可以这样做：

数字 14 是因为我们想要 14 秒中的 2 秒

x = (2*100)/14 = 14.2 =~ 14

和

100 - 14 = 86

所以它会淡入 2 秒然后出现 10 秒然后淡出 2 秒

.fadeInAndOut {
  animation: fadeinout 14s linear forwards;
}

@keyframes fadeinout {

  0%,
  100% {
    opacity: 0;
  }
  
  14%, 86% {
    opacity: 1;
  }
}

https://jsfiddle.net/rs9cbz8g/4/

【讨论】：