CSS 动画没有同时运行

Posted 2023-03-04

【中文标题】CSS 动画没有同时运行

【英文标题】：CSS Animation isn't running simultaneously

【发布时间】：2022-01-16 21:30:19

【问题描述】：

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

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

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

我的代码：

(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

【参考方案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

【讨论】：

非常感谢！！过渡看起来更好，更及时。但我的想法是，模糊和淡入淡出的过渡与背景颜色动画一起制作。我的意思是，当背景颜色从绿色变为黄色时，这个词应该淡出并变得模糊，当黄色进来时它应该再次可见......我希望这是有道理的？ :)