CODEWITHSUNDEEP
htmlcss
Cristi
Cristi

Reputation: 531

Hiding an element after the animation was executed

I have this sample:

link

CODE HTML:

<div id="overlay-page">
    <div class="loader-logo">
        <div class="loader-img-container">
         <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
            <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
        </div>
    </div>
</div>

CODE CSS:

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}
/* here your name of id was wrong */
#overlay-page img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

The problem with this animation is that I want to run it once and hide the ".top" element after the animation is over.

How can I do this? Basically 2 things are important:

1.Run animation just once.

2.The item is hidden after it has been executed

Thaniks in advance!

Upvotes: 1

Views: 96

Answers (6)

Vahid
Vahid

Reputation: 7551

You just need to add { opacity:0; visibility: hidden; } to your .top styles.

In CSS when an animation is over, the styles from the animation are removed so the element will just have the styles that it had before the animation. Here as you don't have any delay in your animation, the element's styles are actually the final styles that it will have after the animation

Upvotes: 0

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

If you have to handle multiple animations you can use the built in events in jquery 

  $(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) {
    $(this).hide();
  });


$(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) {
    $(this).hide();
  });
@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

Upvotes: 0

Pratyush
Pratyush

Reputation: 535

You have used both <img class='top'>,so i have changed the 2nd one to class="bottom"

In #overlay-page img.top css added the animation-fill-mode to apply the property value when animation ended

@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;  
  animation-fill-mode:forwards;
}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
}
 <div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

Upvotes: 0

Maulik
Maulik

Reputation: 785

You only need to apply the 'visibility:hidden' to follwing id '#overlay-page img' that's it.

Like this :

@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
  visibility:hidden;
}
 <div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

Upvotes: 0

user8256287
user8256287

Reputation: 177

You may try this one too.

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}

img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;
  visibility:hidden;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

Upvotes: 0

user8256287
user8256287

Reputation: 177

Here is the CSS

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}

img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;
    visibility:hidden;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

Upvotes: 1

Related Questions