CSS animation needs to load at different times depending on what slide is currently in Flexslider used in WP query loop

Okay here's my scenario.

I'm building a site that works very much like a slidedeck, except it's broken up into pages and each page has a slider. The client has created some custom images and has several transitions.

I'm using Flexslider, Advanced Custom Fields. And everything is happening in a custom Post Type query loop.

As mentioned above, some slides have a transition effect before the next slide fades in. I've gotten this to work with CSS animations and keyframes and additional image. My issue is that one slider has two slides with unique transitions. I notice that the animation on the second slide happens at the same time as the first, so that by the time the second slide fades in the second image in the transition is all that you see. (I would love to have a live demo, but site is being developed locally. If this info and the following code isn't enough info to solve it, I can move my progress to a remote server.)

I'm new to CSS animations, so I may be missing something very basic.

Here's my template code:

<div class="entry-content">
		<div class="flexslider">
		
		<?php 
		$args = array( 'post_type' => 'slide', 'posts_per_page' => 10 );
		$the_query = new WP_Query( $args ); 
		?>
		<?php if( have_rows('slider') ): ?>
			<ul id="slideshow" class="slides"> 
				<?php while( have_rows('slider') ): the_row(); ?>
				
				<li>
					
			  	<img src="<?php the_sub_field('slide'); ?>">
			  	<?php if( have_rows('transition_slides') ): ?>
					<?php while( have_rows('transition_slides') ): the_row(); ?>
			  	<img class="top" src="<?php the_sub_field('transition_slide'); ?>">
			  	<?php endwhile; ?>
			  	<?php endif; ?>
				</li>
		
				<?php endwhile; ?>	
			</ul><!-- slideshow -->	
			<?php endif; ?>
		</div><!-- .flexslider -->
	</div><!-- .entry-content -->

Open in new window



My CSS:

.flexslider .slides img.top {
	position: absolute;
	top: 0;
	left: 0;
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 4s;
	animation-direction: alternate;
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

Open in new window

LVL 9
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
It sounds like you want to change the value of the animation-play-state property, perhaps by adding a class, to start the animation when ready.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

By the way, since the 0% and 100% keyframes are duplicates of the adjacent one, you can remove them. Alternatively, you could use a comma to separate the percentage selectors.
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
https://css-tricks.com/comma-separated-webkit-animation-keyframes/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
David S., Let me see if I understand this:

In order for me to delay the transition until the second slide appears, I'd have to give the slide it's own class, "slide-2" for example and then give it's transition image an animation-play-state property?

.flexslider .slides .slide-2 img.top {
  animation-play-state: paused;
}

Open in new window


I'm just not sure how I get it to play when second slide is visible...
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
I Got it!
It was all about the ".flex-active-slide" class!
But, I wouldn't have discovered it without your help and the resources you shared!

.flexslider .slides .flex-active-slide img.top {
	position: absolute;
	top: 0;
	left: 0;
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 4s;
	animation-direction: alternate;
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Open in new window

0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
It was all about the ".flex-active-slide" class! Once I narrowed that down, then the animation only started when slide was active!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.