CSS animation - position to source

Question

Today I wanted to play with css animation.

So, my main idea was to create four circles, and then when the user clicks on this circle, then he should go to the center of the page, and then he should become a different shape.

So, I used, transformed and animated.

This is the code that I have written so far.

$(".circle").click(function(){ if($(this).hasClass('centerOfPage')){ $(this).removeClass('centerOfPage'); }else{ $(this).addClass('centerOfPage'); } }); 

 .circle{ width: 100px; height: 100px; border-radius: 50%; margin: 10px; } .one{ background-color: red; } .two{ background-color: blue; } .three{ background-color: yellow; } .four{ background-color: green; } .centerOfPage{ position: fixed; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); animation : centerOfPageAnimate 3s; } @keyframes centerOfPageAnimate { 0% { top: 0%; left: 0%; width: 100px; height: 100px; border-radius: 50%; transform: translate(0, 0); } 100% { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div> 

Now there are some problems that you will notice.

• When you click on any circles, their animation starts from the top corner, and not from where they are.
• When you click on the div again, they return to their position, but are not animated, again I want the animation from another shape to be surrounded and in the same position.

Below is the codepen . Thanks.

Answer 1

Since you are already using jQuery, I decided to use it 100%. The main difference between my code and yours is that I keep every position of the circles on load, and I do not rely on CSS3 keyframes.

I keep the position of the circle when loading using jQuery.data method. Now when you delete the class "centerOfPage", you can return to the previously saved position of the circles using jQuery.

See jQuery Snippet and Codepen

 $('.circle').each(function () { $(this).data('circlePosTop', $(this).position().top); }); $(".circle").click(function(){ if($(this).hasClass('centerOfPage')){ $(this).animate({top:$(this).data('circlePosTop'),left:0,borderRadius:'50%',height:'100px',width:'100px'}).removeClass('centerOfPage'); } else { $(this).addClass('centerOfPage').animate({top:0,left:0,borderRadius:'5%',height:'100%',width:'100%'}); } }); 

http://codepen.io/anon/pen/OyWVyP

Answer 2

@nitz JQuery is extremely heavy and should be used as little as possible for this kind of visual change. You are doing it right.

You need to remove the animation by keyframes, this is more complicated.

Please try the following:

 $(".circle").click(function(){ $(this).toggleClass("centerOfPage"); }); 

 .circle{ width: 100px; height: 100px; border-radius: 50%; position: fixed; left: 30px; -moz-transition: all 0.5s ease .2s; -o-transition: all 0.5s ease .2s; -webkit-transition: all 0.5s ease .2s; transition: all 0.5s ease .2s; } .one{ background-color: red; top: 10px; } .two{ background-color: blue; top: 120px; } .three{ background-color: yellow; top: 230px; } .four{ background-color: green; top: 340px; } .centerOfPage{ width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; z-index: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div> 

Answer 3

Perhaps this is what you are looking for?

the centerOfPage class is now available only for starting the animation, without additional positioning and using% in the keyframe declaration, we can first move it to the center of the page and then make it bigger (you can also add intermediate steps if you would like)

 $(".circle").click(function(){ $(this).toggleClass('centerOfPage'); //toggleClass saves you the if else }); 

 .circle{ width: 100px; height: 100px; border-radius: 50%; margin: 10px; transition: all 2s linear; /* added transition to animate going back to start state*/ } .one{ background-color: red; } .two{ background-color: blue; } .three{ background-color: yellow; } .four{ background-color: green; } .centerOfPage{ animation: test 2s forwards; /* add "forwards" here to stop the animation at end-frame */ } @keyframes test{ /* You can use percent to target steps during your animation: here it moves to the center at 10% animation duration and gets bigger at 100 % animation duration */ 10%{ transform: translate(50%); } 100%{ width: 100vw; height: 100vh; border-radius: 5%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div>