Jump to content


Multiple CSS Animations Not Delaying & Actioning Properly

  • Please log in to reply
No replies to this topic

#1 Precise Formwork

Precise Formwork

    Advanced Member

  • Members
  • PipPipPip
  • 356 posts
  • Gender:Male
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 10 October 2017 - 08:13 PM

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.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users