CSS Transition doesn’t work with top, bottom, left, right

by

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

The reason this is needed is because you can’t transition from a keyword, and the default value for top is auto.

It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don’t transition something else (like color) unintentionally.

More Related Contents:

  1. CSS3 transition events
  2. How to use jQuery to wait for the end of CSS3 transitions?
  3. CSS transition doesn’t start/callback isn’t called
  4. How do I normalize the CSS3 transition end events across browsers?
  5. Callback on CSS transition
  6. Detect CSS transitions using Javascript (and without modernizr)?
  7. How to window.scrollTo() with a smooth effect
  8. CSS transitions do not work when assigned trough JavaScript
  9. Clean way to programmatically use CSS transitions from JS?
  10. Combination of animation and transition not working properly
  11. css transitions on new elements
  12. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  13. How to hide css and js version details from weppalyzer in PHP
  14. How to make page loaders/animations/transitions
  15. toggle show/hide div with button?
  16. Textarea Auto height [duplicate]
  17. Dynamically loading css stylesheet doesn’t work on IE
  18. How to set background color of HTML element using css properties in JavaScript
  19. How to draw polygons on an HTML5 canvas?
  20. show loading icon until the page is load?
  21. How to use square cursor in a HTML input field?
  22. webkit-transform overwrites z-index ordering in Chrome 13
  23. how to remove css property using javascript?
  24. jsPDF can’t get any styling to work
  25. Adding Google Translate to a web site
  26. How to do page numbering in header/footer htmls with wkhtmltopdf?
  27. Reading non-inline CSS style info from Javascript
  28. HTML5 input required, scroll to input with fixed navbar on submit
  29. Get Element StyleSheet Style in JavaScript
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment