The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animate delay + start position

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #196217

    I have a couple of CSS animations which I’m happy with, the problem I’m having occurs when I go to use a delay.

    Basically I don’t want to display the object (div) until the animation begins. I thought setting opacity: 0; on the div would do the trick and then within the @keyframes set opacity: 1; so when it ran it was visible. The problem I found with this was after the animation finished the object (div) disappeared again.

    Here’s a basic example:

    You see the <h1> is in it’s ‘finish’ position until the animation begins after a 1 second delay – it when jumps down.

    If I set h1 {opacity: 0;}, this hides the object initially and displays gracefully when the animation begins – but as soon as the animation is complete, it’s hidden again. You can see this in a forked CodePen version here:

    I’m also trying to resolve a similar issue on the following animation: …which I imagine will/can be fixed using the same principles to resolve the slide/fade on the h1.

    I’m a bit of a n00b when it comes to this so any advice will be greatly appreciated!


    That’s great @bearhead, thanks a lot!

    With regards to the bouncing ball version, if I set opacity: 0; on the div (.btn-next-panel), I then need to set opacity: 1; on 0% so it appears when the animation commences. If I do nothing else the animated fades out at the end – is that because it will always return to it’s original value (set on the div) unless specified at 100% too?

    Also, would it be better to use visibility: hidden; for the ball as I’m not really bothered about it fading it, setting it to visibility: visible; when the animation starts? Or does it not really matter, as long as the effect is what you’re after?

    Thanks again!


    I haven’t tested this, I am on mobile right now, but opacity leaves the element there but makes it transparent but visibility will actually hide it but leave the allocated space.

    The difference might be that an invisible element would allow pointer events through it.

    I will test when back on desktop. Could be useful if true.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.