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

  1. boblebad
    Posted 2 years ago #


    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;
    	-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

  2. boblebad
    Posted 2 years ago #

    Can this in any way be tweeked to fit ?


Topic Closed

This topic has been closed to new replies.

About this Topic