Jump to content

Loop animation

sgtelias

By sgtelias
in CSS

 Share

Recommended Posts

sgtelias Newbie

sgtelias

Posted
Posted

I've a nav bar like this:

<div id="navbar">

<ul>

<li id="link1"><a>Link1</a></li>

<li id="link2"><a>Link2</a></li>

<li id="link3"><a>Link3</a></li>

</ul>

</div>

I've created a an animation like this:

(CSS)

#link1 a

{
background-color:#089DE3;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 8s;
animation-iteration-count: 1;
animation-direction: alternate;
}
than
#link2 a
{
border-right:1px solid #0068B3;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate;
-webkit-animation-delay: 8s;
animation-name: example;
animation-duration: 8s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-delay: 7s;
}

etc...

 

With this animation, first highlight the button link 1, than link2, etc., but now i need a system to restart the cycle, when the animation reaches the last link (in this case, when the animation effect reaches the link3, i need that restart with the link1).

Link to comment
Share on other sites
sgtelias Newbie

sgtelias

Posted
  • Author
Posted (edited)

I've used this:

<script>
$(function () {
$("#hormenu").click(function () {
var el = $(this);
//Prepend the clone & then remove the original element
el.before(el.clone(true)).remove();
});
});
</script>
The problem is click function. Should have restart without click.
Edited by sgtelias
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You would have to time it, so when the animation is complete a setTimeout() that is running in background, will force the cloning replacement to take place.

 

The other way, probably better of the two is to loop through each link applying class that will activate animation so you only need a single class for the animation instead individual link id animations ending up with what is it 4?, then at set time remove class from current, apply to next, clone, replace with clone, this will cause animation to run, at the same time count which link you are current in, IF in last return to first else carry on. It's less css, less worry about getting timing right, without the need to adjust timing every time a link is added

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 




<!DOCTYPE html>



<html>



    <head>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />



        <title>Document Title</title>



        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>



        <script type="text/javascript">


 



        </script>



        <style type="text/css">


 



            #navbar, #navbar ul, #navbar li {list-style-type: none; margin: 0; padding:0; text-indent: 0; text-align:center;}



            #navbar li {display: inline-block;background-color:#089DE3;}



            #navbar li a{padding:10px; line-height: 25px; color: #fff;}


 



            .link_animate



            {



                -webkit-animation-name: example; /* Chrome, Safari, Opera */



                -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */



                -webkit-animation-direction: alternate;



                animation-name: example;



                animation-duration: 4s;



                animation-iteration-count: 1;



                animation-direction: alternate;



            }



            /* Chrome, Safari, Opera */



            @-webkit-keyframes example {



                0%   {background-color:#089DE3;}



                25%  {background-color:green;}



                50%  {background-color:red;}



                75%  {background-color:green;}



                100% {background-color:#089DE3;}



            }


 



            /* Standard syntax */



            @keyframes example {



                0%   {background-color:#089DE3;}



                25%  {background-color:green;}



                50%  {background-color:red;}



                75%  {background-color:green;}



                100% {background-color:#089DE3;}



            }



        </style>



    </head>



    <body>



        <div id="navbar">


 



            <ul>


 



                <li id="link1" class="link_animate"><a>Link1</a></li>


 



                <li id="link2"><a>Link2</a></li>


 



                <li id="link3"><a>Link3</a></li>


 



            </ul>


 



        </div>


 



        <script>



            var myIndex = 0;



            loop_anim_links();


 



            function loop_anim_links() {



                var parent_element = document.getElementById('navbar');



                var x = parent_element.getElementsByTagName('LI');


 



                myIndex++;



                if (myIndex > x.length) {



                    myIndex = 1;



                }



                //reset animation by cloning original and replace with the newer clone



                var anim_element = x[myIndex - 1];



                var anim_element_clone = anim_element.cloneNode(true);



                anim_element.parentNode.replaceChild(anim_element_clone, anim_element);



                if (x[myIndex - 1].className.indexOf('link_animate') == -1)



                {



                    x[myIndex - 1].className = x[myIndex - 1].className + ' link_animate';



                }



                setTimeout(loop_anim_links, 6000);



            }



        </script>



    </body>



</html>







			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
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
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
					

				
                

                




				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •