WordPress.org

Ready to get started?Download WordPress

Forums

CSS fade and then display:none ? (2 posts)

  1. boblebad
    Member
    Posted 3 months ago #

    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

  2. boblebad
    Member
    Posted 3 months ago #

    Can this in any way be tweeked to fit ?

    http://fvsch.com/code/transition-fade/test5.html#test3

Reply

You must log in to post.

About this Topic