Header disappears on page load

1 Views

I would like to achieve what happens on this site (http://www.gasworks.org.uk/residencies/) with the header on page load: it shows for a second and then disappears.

They use this in their CSS:

Read More
.faded {
    opacity: 0;
    visibility: hidden;
}

.section-header {
    display: flex;
    height: 700px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: visibility 0s linear 1s, opacity 1s linear 0s;
    width: 100%;
    z-index: 98;
}

But I can’t get this transition with visibility and opacity to work in my case. It just shows nothing.

I would like to achieve this with CSS only, if possible. I’m working on a wordpress theme by _S (http://underscores.me/) and I’m only familiar with HTML and CSS.

I’ve tried the CSS Keyframes option below, but after the animation is done the header will show. 

.site-title {
    -moz-animation-name: opacityTitle;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: opacityTitle;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;

    animation-name: opacityTitle;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1s;
}

@-moz-keyframes opacityTitle {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes opacityTitle {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
    }
}

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

Any idea’s?

Thanks a lot!
Robbert

Post Views: 1

Related posts

1 comment

  1. Basically you need to run your animation only once, where you animate the opacity property from 1 to 0.

    Below an example showing the concept, off-course you can change it accordingly to you desired effect.

    /* animation code */
@keyframes splash-anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.splash {
  font-size: 80px;
  animation-name: splash-anim ; /* associate an animation*/
  animation-duration: 4s; /* give it some timing */
  animation-iteration-count: 1; /* run animation only once*/
  animation-timing-function: ease-in;
  animation-fill-mode: forwards; /* stop at last frame*/
}
    <div class="splash">your text here!</div>

    You can read more here:
    https://css-tricks.com/snippets/css/keyframe-animation-syntax/

Comments are closed.