CODEWITHSUNDEEP
cssscaletransitiontransformation
Faisal Khurshid
Faisal Khurshid

Reputation: 1899

CSS3: Transforming ONLY during Transition

I know we can transform shape (e.g. circle to square) from one state (e.g. top: 0) to another state (e.g. top: 20px). But I'm not sure how we can keep the shape at both states intact (i.e. keeps it circled @ top: 0 and top: 20px), but ONLY during transition I want to transform its shape. An example of what I want to achieve is somewhat like this:

enter image description here

Upvotes: 4

Views: 87

Answers (2)

whatoncewaslost
whatoncewaslost

Reputation: 2256

Here's a pure css version of what you want. It transforms only during the transition. Not hard at all. Just use keyframes to specify what properties you want changed and when.

The HTML

  <div class="childAnimated"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

And the CSS

.child {
  border: .5em solid white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  margin-bottom: 1em;
}

.childAnimated {
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 999;
  background-color: white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  -webkit-animation: gooAnim 4s infinite;
}

@-webkit-keyframes gooAnim {
  0%   { top: 1em; }
  25%   { top: 3.8em; left: 1.5em; width: 2em; height: 2em; }
  50%  { top: 6em; width: 3em; height: 3em; left: 1em;}
   75%   { top: 8.8em; left: 1.5em; width: 2em; height: 2em; }
  100% { top: 11em; }
}

If you want to see it in action, here's the codepen. Run it in Chrome if you can. http://codepen.io/shuffguy/pen/JdLXeM

This was a quick example, but if you play around with the keyframe resizing properties you can definitely emulate that example exactly with keyframes.

Upvotes: 2

Johnny John
Johnny John

Reputation: 384

U can use the @keyframe animation in css for this, just take a look: https://css-tricks.com/snippets/css/keyframe-animation-syntax/

And here is a exemple what i made with keyframes and jquery animate:

Css

#box{
            display: block;
            background: red;
            width: 300px;
            height: 300px;
            border-radius: 100%;
            position: relative;
        }
        @keyframes change_form {
          0% {
            width: 300px;
          }
          50% {
            border-radius: 0%;
            width: 50px;
            height: 100px;
          }
          100% {
            width: 300px;
            height: 300px;
          }
        }

Jquery

$(document).ready(function(){
   window.setTimeout(function(){
    $( "#box" ).animate({ 
                        "top":"+=134px"
                        ,
                    },{
    step: function(now) {
                if (now >= 11) {
                    $("#box").css({'transition':'all linear 1s', 'animation':'change_form ease 2s '});
                }
            } }
        );
    }, 2000);
});

In a simple Div

   <div id="box"></div>

Just a example what i make to show u how to make this effect, u can make this only with css, just putting the 'animation' in your div

Upvotes: 2

Related Questions