0

I found this question and associated answer: CSS hide element, after 5 seconds show it

However I am trying to hide element a, and reveal element b at the same time.

Please see my current code:

#showthiscolumn {
  animation: cssAnimation 0s 5s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}


#hidethiscolumn {
  animation: cssAnimation 0s 5s forwards;
  visibility: visible;
}

@keyframes cssAnimation {
  to   { visibility: hidden; }
}

The #hidethiscolumn element works, but #showthiscolumn content never appears.

Drewdavid
  • 3,071
  • 7
  • 29
  • 53
  • 2
    can you please change the one of your animations name `@keyframes cssAnimation-2` and apply `animation: cssAnimation-2 0s 5s forwards` – UPinar Apr 21 '22 at 13:47
  • @Drewdavid, is there any reason you prefer `CSS`? It's a lot easier in `JavaScript`. – Halo Apr 21 '22 at 13:53
  • Thanks @UPinar - please see my comment below Zach Jensz's answer! Hah. =) – Drewdavid Apr 26 '22 at 03:19
  • 1
    @Anye I'm sure there are several reasons why one might prefer to not involve further programming languages or add a javascript script to a web page. In my case I'm using the WordPress Customizer to add CSS code and JS is not supported within it. To use JS I would have to make customizations to a WordPress installation or theme file, or install a plugin just to do this, which would be rather "messy". So I don't think in my case it would be a lot easier to do it in Javascript! Hehe =) Thanks for your comment/question. – Drewdavid Apr 26 '22 at 03:22

1 Answers1

2

You're overwriting your CSS animation. Use different animation names for different animations.

#showthiscolumn {
  animation: cssAnimation1 0s 2s forwards;
  visibility: hidden;
}

@keyframes cssAnimation1 {
  to   { visibility: visible; }
}


#hidethiscolumn {
  animation: cssAnimation2 0s 2s forwards;
  visibility: visible;
}

@keyframes cssAnimation2 {
  to   { visibility: hidden; }
}
<div id="showthiscolumn" style="background: tomato; width: 1rem; height: 1rem;"></div>
<div id="hidethiscolumn" style="background: coral; width: 1rem; height: 1rem;"></div>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
  • 2
    Thanks - I thought cssAnimation was like a CSS-specific command or something. I didn't know it was more of a 'variable' name... CSS is weird. – Drewdavid Apr 26 '22 at 03:18