0

I am trying to get a badge i've design to fade in and out, but I am lacking some understanding of css animations. What I would like is is a 2s fade in, a 10 second pause, and a 2s fade out.

Right now I have a 2s fade in and fade out. But what would be the next part of this?

I've looked here, here, here, here, here, and here but nothing really covers exactly what i'm looking for, and any modifications i've made have screwed everything up. Is this even possible in pure 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; }
  }

I have also tried something more complex, but theres a lot of flickering involved, and it seems to be in a loop as well 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 ;
  }
IWI
  • 1,150
  • 1
  • 18
  • 35

2 Answers2

2

You can achive it with one css animation.

.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

Mo.
  • 242
  • 2
  • 13
1

You can do it like this:

the number 14 is because we want 2 seconds out of 14

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

and

100 - 14 = 86

so it will fade in for 2sec then appears for 10sec then fade out for 2sec

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

@keyframes fadeinout {

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

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

Wael Zoaiter
  • 549
  • 4
  • 7