CSS transition between left -> right and top -> bottom positions

by

You can animate the position (top, bottom, left, right) and then subtract the element’s width or height through a CSS transformation.

Consider:

$('.animate').on('click', function(){
  $(this).toggleClass("move");
})
     .animate {
        height: 100px;
        width: 100px;
        background-color: #c00;
        transition: all 1s ease;
        position: absolute;
        cursor: pointer;
        font: 13px/100px sans-serif;
        color: white;
        text-align: center;
      }

                               /* ↓ just to position things  */
      .animate.left   { left: 0;   top: 50%;  margin-top: -100px;}
      .animate.right  { right: 0;  top: 50%;  }
      .animate.top    { top: 0;    left: 50%; }
      .animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}


      .animate.left.move {
        left: 100%; 
        transform: translate(-100%, 0);
      }

      .animate.right.move {
        right: 100%; 
        transform: translate(100%, 0);
      }

      .animate.top.move {
        top: 100%; 
        transform: translate(0, -100%);
      }

      .animate.bottom.move {
        bottom: 100%; 
        transform: translate(0, 100%);
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>

And then animate depending on the position…

More Related Contents:

  1. Using CSS for a fade-in effect on page load
  2. CSS3 background image transition
  3. css3 transition animation on load?
  4. CSS 3 slide-in from left transition
  5. CSS Animation and Display None
  6. Transition background-color via slide animation
  7. How can I transition width of content with width: auto?
  8. Simulating transform-origin using translate
  9. Using CSS transitions in CSS Grid Layout
  10. How to prevent Webkit text rendering change during CSS transition
  11. Pure CSS scroll animation
  12. CSS3 transition on click using pure CSS
  13. Two-tone background split by diagonal line using css
  14. Expand div from the middle instead of just top and left using CSS
  15. CSS transition with visibility not working
  16. CSS transition auto height not working [duplicate]
  17. Animating max-height with CSS transitions
  18. CSS how to make an element fade in and then fade out?
  19. How can I transition height: 0; to height: auto; using CSS?
  20. How to transition CSS display + opacity properties
  21. CSS3 Transition – Fade out effect
  22. Can I apply a CSS transition to the overflow property?
  23. Does Internet Explorer support CSS transitions?
  24. Delay mouseout/hover with CSS3 transitions
  25. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  26. Image moves on hover when changing filter in chrome
  27. CSS3 transitions on pseudo-elements (:after, :before) not working?
  28. webkit transform blocking link
  29. Drawing border colors during a CSS transition
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment