Opacity animation

Hello, I am trying to create an animation effect with just 2 words, that will fade in/out simultaneously.

I have made this example, but the timing between them it’s not the same, there are some differences to how much time each animation takes.

Is there a way to make them appearing / disappearing the same time, and have the same time to fade-in/out?
With just CSS?

They look the same to me as far as I can tell. They take 20% of the 6 seconds to fade in and out for each. They look to be uniform to me.

However you don’t need two keyframes to do this as you can use the same keyframe.

.container {
  font-size: 50px;
  position: relative;
  background: pink; /* will have no effect as container has no static content */
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  animation:fade-1 6s linear forwards infinite alternate;
}
.text-2 {animation-direction: alternate-reverse;}
@keyframes fade-1 {
  0% {opacity: 1;}
  40% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0; }
}
2 Likes

great thanks, if I want also for the first fade/in to match the rest of the animation I have just to add the animation delay I guess right?
it seems to work this way perfectly.

And it’s more clever to use just one keyframe :smiley:

1 Like

It looks perfectly fine to me and I don’t see any difference. That’s all I can say

1 Like

If you want the first word to fade in at the start then yes you can just use the same keyframe but witn an animation delay.

e.g.

.container {
  font-size: 50px;
  position: relative;
  background: pink; /* will have no effect as container has no static content */
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  animation:fade-1 6s linear forwards infinite alternate;
}
.text-2 {animation-delay:6s;}
@keyframes fade-1 {
  0% {opacity: 0;}
  40% {opacity: 0;}
  60% {opacity: 1;}
  100% {opacity: 1;}
}

If you want the pink background to show then don’t position the first text.

e.g.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.