CSS Animation isn't running simultaneously - css

Question

I am currently working on an intro transition. Where the following should happen:
A Background-Color transition from a set of different background colors
A word swapping transition -> here should each word change with a fade in and out + blur transition
The basics are working pretty good here, but I can’t get my head around that the whole transition working simultaneously.
Especially the blur in and out transition isn't totally out of timing. I tried so many different values.
My Code:
(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>
Codepen:
https://codepen.io/Dennisade/pen/eYGBPjq

Answer 1

I think it is just a matter of having 4 different pendulums (animations) with varying time periods and balancing them. So I have made some changes to the time periods in your codepen, specifically css and js, see if this works for you.
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