WordPress.org

Support

Support » Themes and Templates » CSS fade and then display:none ?

CSS fade and then display:none ?

  • Hi

    I’m trying to ad a display:none after a fade with animation, but can’t figure out how to do it ?

    This is my CSS:

    /*** Changes saved ***/
    div#message p {
    	font-size: 12px;
    	display: block;
    	padding: 10px 15px;
    
    	animation:signup-response 0.5s 1;
    	-webkit-animation:signup-response 0.5s 1;
    	animation-fill-mode: forwards;
    
    	animation-delay:2s;
    	-webkit-animation-delay:1s; /* Safari and Chrome */
    	-webkit-animation-fill-mode: forwards;
    
    } 
    
    @keyframes signup-response{
    	from {opacity :1;}
    	to {opacity :0;}
    }
    
    @-webkit-keyframes signup-response{
    	from {opacity :1;}
    	to {opacity :0;}
    }

    It is a message displayed in a theme after update on a member page, the fading works just perfect, but the space taking up by the block is still occupied including the padding, i need it to go away, so i need to execute a display:none after the fade, but can’t get a timer on it.

    Or is there an easier way with some box CSS3 tricks ?

    It has to fade away by itself after a few seconds, and it gets activated when the member clicks the save button, so i guess toggle is out of the question ?

    All the best
    Carsten

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘CSS fade and then display:none ?’ is closed to new replies.