1

I'd like to apologise upfront for my code and question. I'm a graphic designer but have been editing some html for online digital banners.

Currently I have a colored bar slide in from the left to the right after 2 secs. This works well using 'animation-name:barAnim'

Then I want that same bar to fade out after 7.5 secs. However once I add 'animation-name:fadeOut' the bar breaks and only flashes at the 7.5 second mark.

All of this needs to work automatically without any user input.

Please see current code below. Any help would be really really appreciated.

.col_bar1 {
  left: 0px;
  top: 412px;
  width: 132px;
  height: 11px;
  background: #5d7773;
  opacity: 0;
}

.col_bar1 {
  animation-name: barAnim;
  -webkit-animation-name: barAnim;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.col_bar {
  animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes barAnim {
  0% {
    -webkit-transform: translate3d(-130px, 0, 0);
    transform: translate3d(-130px, 0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(18px, 0, 0);
    transform: translate3d(18px, 0, 0);
  }
}

@-webkit-keyframes barAnim {
  0% {
    -webkit-transform: translate3d(-130px, 0, 0);
    transform: translate3d(-130px, 0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(18px, 0, 0);
    transform: translate3d(18px, 0, 0);
    /*--start from lhs--*/
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="col_bar1"></div>
biberman
  • 5,606
  • 4
  • 11
  • 35
Rachel
  • 21
  • 3

1 Answers1

3

You can do comma separated animations. I have used the animation shorthand here and split it to multiple lines for readability.

CSS

animation:
    barAnim 0.5s ease-out 2s forwards,
    fadeOut 0.2s ease-in-out 7.5s forwards;
-webkit-animation:
    barAnim 0.5s ease-out 2s forwards,
    fadeOut 0.2s ease-in-out 7.5s forwards;
dylanjameswagner
  • 554
  • 3
  • 6