CSS Transition Doesn't Work with Top, Bottom, Left, Right

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.

CSS transition doesn't work from bottom to top

replace

.sidebarr.opened{
top: 30%
}

with

.sidebarr.opened{
    bottom: 0
    }

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

transition with right using css?

Using right: auto; does not work.

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  transition: all 2s ease-out;
  right:100%;
  transform: translate(100%,0);

}

.active{
  background-color: green !important;
  right:0 !important;
  transform: translate(0,0) !important;
}

<div id="box" onclick="this.classList.add('active')"></div>

CSS Position not working when specifying Top / Bottom / Left / Right

You should use px or another units, like %, em, pt etc when you set numerical values in css.

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 does not work

You need to have a default value for an absolute position in order to make it work.
Try this:

.desc-mov {

  background-color: #eee;

  font-size: 11px;

  color: black;

  height: 130px;

  width: 100%;

  opacity: 0.6;

  line-height: 1.5;

  transition: 5s;

  top: 0;

  position: absolute;

}

.desc-mov:hover {

  top: 100%;

}

 <div class="desc-mov ">

    <p > how are you are that working</p>               

</div>

---

Related Topics