CSS 动画没有同时运行

Question

我目前正在进行介绍性过渡。应该发生以下情况的地方：

• 一组不同背景颜色的背景颜色过渡
• 单词交换过渡 -> 这里每个单词都应该随着淡入淡出 + 模糊过渡而变化

这里的基础工作非常好，但我无法理解整个过渡同时工作。 尤其是模糊进出过渡并非完全不合时宜。我尝试了很多不同的值。

我的代码：

(function(){

    var words = ['Fade', 'Blur', 'Word'], i = 0;    
  
  setInterval(function(){
    $('#swap-text').fadeOut(1250, function(){
      $(this).html(words[i=(i+1)%words.length]).fadeIn(1250, "linear");
    });
  },3000);
  
})();

body{
  font-family: sans-serif;
  font-weight:100;
  padding:0;
  margin: 0;
}

@keyframes colorfont { 
    0% { color: #C0FF01; }
    33% { color: #013334; }
    66% { color: #C0FF01; }
    100% { color: #C0FF01; }
}

@keyframes glow { 
    0% { background: #013334; }
    33% { background: #C0FF01; }
    66% { background: #8E7DD2; }
    100% { background: #C0FF01; }
}

.intro-claim{
    opacity: 1;
}

.intro-content{
    width: 100vw;
  height: 100vh;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.intro-content p {
  max-width: 1215px;
  padding: 0 50px;
  color: #C0FF01;
  // opacity: 0;
  text-align: left;
  font-size: 45px;
  line-height: 1.2;
  animation: colorfont 9s infinite;
  animation-delay: 3s;
  animation-timing-function: linear;
}

.intro-background{
    width: 100%;
    z-index: -100;
    height: 100vh;
    display: flex;
    position: fixed;
  top:0;
    background: #013334;
    animation: glow 9s infinite;
    animation-delay: 3s;
}


#swap-text{
    margin-left: 12px;
  font-weight:800;
  animation: blur 4250ms linear 0s infinite normal none;
    animation-delay: 3s;
}


@keyframes blur {
    0%{
        -webkit-filter: blur(0px);
    }
    20%{
        -webkit-filter: blur(0px);
    }
    40%{
        -webkit-filter: blur(8px);
    }
    60%{
        -webkit-filter: blur(8px);
    }
    80%{
        -webkit-filter: blur(0px);
    }
    100%{
        -webkit-filter: blur(0px);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="intro-content">
  
    <div class="intro-logo intro-claim">
        <p>life is full of impressions. some of them remain. we create contemporary experiences, that people love to<span id="swap-text">Fade</span></p>
    </div>

</header>
  
<div class="intro-background"></div>

代码笔： https://codepen.io/Dennisade/pen/eYGBPjq

Answer 1

我认为这只是拥有 4 个不同时间段的不同钟摆（动画）并平衡它们的问题。因此，我对您的 codepen 中的时间段进行了一些更改，特别是 css 和 js，看看这是否适合您。

CSS：

$transition: 500ms cubic-bezier(0.485, 0.355, 0.345, 0.950);

$green: #013334;
$lightblue: #E3EAF4;
$brightmood: #8E7DD2;
$yellow: #C0FF01;

$introvalue: 9s;
$introdelay: 3s;

body{
  font-family: sans-serif;
  font-weight:100;
  padding:0;
  margin: 0;
}

@keyframes colorfont { 
    0% { color: $yellow; }
    33% { color: $green; }
    66% { color: $yellow; }
    100% { color: $yellow; }
}

@keyframes glow { 
    0% { background: $green; }
    33% { background: $yellow; }
    66% { background: $brightmood; }
    100% { background: $green; }
}

.intro-claim{
    opacity: 1;
}

.intro-content{
    width: 100vw;
  height: 100vh;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 0;
    p {
        max-width: 1215px;
    padding: 0 50px;
        color: $yellow;
        // opacity: 0;
        text-align: left;
        font-size: 45px;
        line-height: 1.2;
        animation: colorfont $introvalue infinite;
        animation-delay: $introdelay;
        animation-duration: 6s;
    }
}

.intro-background{
    width: 100%;
    z-index: -100;
    height: 100vh;
    display: flex;
    position: fixed;
  top:0;
    background: $green;
    animation: glow $introvalue infinite;
  animation-duration: 6s;
    animation-delay: $introdelay;
}


#swap-text{
    margin-left: 12px;
  font-weight:800;
  animation: blur 4250ms infinite;
    animation-delay: $introdelay;
  animation-duration: 2s;
}


@keyframes blur {
    0%{
        -webkit-filter: blur(0px);
    }
    50%{
        -webkit-filter: blur(8px);
    }
  100%{
        -webkit-filter: blur(0px);
  }
}

JS：

(function(){
        var words = ['Fade', 'Blur', 'Word'], i = 0;
        
        setInterval(function(){
            $('#swap-text').fadeOut(500, function(){
                $(this).html(words[i=(i+1)%words.length]).fadeIn(500, "linear");
            });
        },2000);
    })();

https://codepen.io/gamezordd/pen/oNGYQwp