Jump to content
Sign in to follow this  
Precise Formwork

Multiple CSS Animations Not Delaying & Actioning Properly

Recommended Posts

Hi Guys,


Sorry to be bothering the forum again. I've delayed in trying to fix myself but I'm not having much luck. I'm trying to add a second animation 'add a background-color & border-bottom' to an element via my nofade class which activates my addbottomborder keyframe. The really strange thing is dependant on what you put here it works or not.


In my html I have:

	<h5 class="zoomout">Fast</h5>
	<h5 class="zoomout">Accurate</h5>
	<h5 class="zoomout">Reliable</h5>
	<h5 class="zoomout nofade">RC ESTIMATING LTD</h5>
@keyframes zoomout{
	0% {transform: scale(1)}
	100% {transform: scale(0.90); opacity: 100;}

h5.zoomout {
	width: 100%;
	text-align: center;
	top: 45%;
	padding: 0;
	margin: 0;
	position: absolute;
	display: inline-block;
	animation-name: zoomout;
	animation-duration: 3s;
	opacity: 0;
	font-size: 4em;

@keyframes addbottomborder {
	from {background-color: transparent; border-bottom: 0;}
	to {background-color: red; border-bottom: 5px solid grey !important;}

h5.nofade {
	animation-fill-mode: forwards;
	animation-name: zoomout, addbottomborder;
	animation-delay: 12s, 15s;
	animation-duration: 3s, 1s;

The delay is not working on the second animation addbottomborder. Technically the background-color: red; should not come in until right at the end and no matter what I try I can't get the border-bottom to activate on the second animation nofade.

Originally I thought that the second animation was not activating at all but the backgroud-color is brought in; however it's not at the correct time. It should be after the 1st animation has finished.


Can anyone point out what's going on? I have the page live here.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts