Webkit-Transition for "Top" and "Bottom" Properties

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

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.

Transition effects Top vs. Bottom in CSS is not working

If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.

Here is the css I changed:

.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}

.featured-banner a:hover {
    top:inherit;
    top: -55px;
}

Finally, a fiddle: Demo

CSS Transition from top to bottom and vice versa

After a long trial and error period, I have determined that this can't be done with pure CSS. I will use the JQuery SlideDown function to do this.

CSS Transition: Cover Image From Bottom To Top

Very simple: change the top: 0; attribute in .child1 to bottom: 0;

Changing bottom and top values in a CSS transition on click

You can't use top and bottom interchangeably. You need to have one style you need to change.

For example:

.wrapper.slide-up {
  top: 0px;
}
.wrapper.slide-down {
   top: calc(100% - 36px);
}

JSFiddle

You can use the calc css function to work out exactly what you need.

top: calc(100% - 36px);

But you need to make sure that when you're doing transitions, you keep it to one element that you need to change. So top will give it the animation when you have two different top values, but when you introduce bottom when it's not set, it will just 'jump'.

Be careful when using calc() as it isn't fully supported in older browsers:

Can I use - Calc()

How to make CSS3 transition working for border-bottom property which starts from bottom to top

You can simulate your desired outcome by using :after or :before pseudo elements. This way you'll have much greater control over the desired effect (like adding various transforms).

body {  padding: 50px;}
a {  text-decoration: none;}
li {  display: inline;  margin-right: 10px;}
li a {  border-bottom: 0 solid transparent;  color: #777;  display: inline-block;
  padding-bottom: 3px;  position: relative;}
li a > .fancy-line {  background-color: transparent;  content: "";  display: block;  height: 0;
  position: absolute;  bottom: 0;  left: 0;  right: 0;
  -o-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;  -ms-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;  -moz-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;  -webkit-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;  transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;}
li a:hover > .fancy-line {  background-color: #206E9F;  height: 3px;}

<ul>    <li><a href="#home">HOME <span class="fancy-line"></span></a></li>    <li><a href="#page">PAGE <span class="fancy-line"></span></a></li>    <li><a href="#about">ABOUT US <span class="fancy-line"></span></a></li>    <li><a href="#contact-me">CONTACT US <span class="fancy-line"></span></a></li></ul>

CSS Transition Direction - Can It Always Be The Same?

You can use keyframes for this, or listen to transitionend.

const btn = document.querySelector('button'),
    cover = document.querySelector('.cover');

btn.addEventListener('click', ()=> {
    
  if(cover.classList.contains('covered')){
    cover.classList.add('remove_covered');
  } else {
    cover.classList.add('covered');
  }

  cover.ontransitionend = () => {
    if(cover.classList.contains('remove_covered'))
        cover.classList.remove('covered','remove_covered');
    };
  
});

.child {
  width: 300px;
  height: 300px;
}

.parent {
  position: relative;
  width: 300px;
  height: 300px;
}

.cover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #fff;
  transition: height 1s ease-in-out;
}

.covered {
  height: 100%;
}

.remove_covered {
  top: 0;
  bottom: auto;
  height: 0;
}

<button>Toggle</button>
<div class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="cover"></div>
</div>

---

Related Topics