Changing Bottom and Top Values in a CSS Transition on Click

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()

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: Cover Image From Bottom To Top

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

Animate a div from bottom to top with css

Show Card description on Card hover

Completely flexible and responsive

No hard-coded or arbitrary heights, no JS involved.

Basically,

• translateY the title to -100%, on hover animate to 0
• Wrap both title and content into a DIV (i.e: .anim)
• translateY .anim to +100%, and on hover animate it to 0

Open the example in full page to see what happens and how it works:

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

<div class="thumb">
  <div class="anim">
    <div class="title">The movie even longer title</div>
    <div class="description">
      Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
    </div>
  </div>
  <div class="author">Published by super long some Author</div>
</div>

How to animate bottom: value to bottom: auto

As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with transform: translate() like in the below snippet and achieve the same effect.

Below is the relevant SCSS code and what it does:

• The transform: translateY(-100%) moves the elements content upwards by the exact height of the container element. This would hide the whole container.
• A top: 39px is added such that the chevron icon is still shown and only the content is hidden.
• On hover the transform is nullified by doing transform: translateY(0%). This puts the element back in its original position.
• But because of the top: 39px present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding top: 0px on hover.

.hud {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: all 1s;
  top: 39px;
  transform: translateY(-100%);
  &:hover {
     top: 0px;
     transform: translateY(0%);
  }
}

body {

  background: #121111;

}

.hud {

  position: absolute;

  color: red;

  width: 100%;

  text-align: center;

  -webkit-transition: all 1s;

  transition: all 1s;

  top: 39px;

  -webkit-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  transform: translateY(-100%);

}

.hud:hover {

  top: 0px;

  -webkit-transform: translateY(0%);

  -ms-transform: translateY(0%);

  transform: translateY(0%);

}

.pull-down {

  color: #e6e6e6;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  cursor: pointer;

  height: 24px;

  margin-top: 15px;

  font-size: 1.5em;

}

.pull-down:hover {

  color: #fff;

}

.hud:hover .pull-down {

  color: #fff;

  -ms-transform: rotate(-180deg);

  -webkit-transform: rotate(-180deg);

  transform: rotate(-180deg);

}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="hud">

  <div class="hud-internal">

    <p>foobar</p>

  </div>

  <i class="fa fa-chevron-down pull-down" data-hud-toggle></i>

</div>

CSS3 shorthand for transition div 100px from the bottom to the final state

The final state values cannot be appended to the transition property's value like in the code below. The property's values can only be details about which property should be transitioned, the duration of the transition, the delay and timing function etc.

transition: padding 0.25s ease-in-out 1.0s 0 0 100px 0;
                                           ^  
                                           |_ Everything from here on in are incorrect

Another thing to note is, transition is not the right choice for this us-case. Transitions happen only when the properties on an element change due to some action (like :hover, :focus, addition of new class on click using JS etc). There is no pure CSS way to trigger transition on page load. You can use scripting and auto trigger state changes based on time-out but I feel that is unnecessarily complex for something that can be achieved using CSS in a different way.

You have added a delay to the transition but this does not represent the time after which the transition should start automatically. It represents the time that should elapse after the state changes are applied before which the transition can commence.

---

Animations should be used for automatically triggering changes on page load. Unlike transition, they are auto invoked. You can read more about CSS animations here.

For animating an element from 100px below its final resting position to the top, any one of the following properties could be used:

• margin-top
• top (can be used for elements with absolute positioning)
• translateY()

Using margin-top:

.caption {

  display: inline-block;

  margin-top: 100px;  /* starting position */

  animation: move-up 1s linear forwards;

            /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */

}

@keyframes move-up {

  to {

    margin-top: 0px;  /* final resting position */

  }

}

/* Just for demo */

.caption {

  height: 2em;

  width: 10em;

  line-height: 2em;

  background: tomato;

}

<!-- library is only to avoid browser prefixes -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='caption'>This is a caption</div>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {

  border: 1px solid #eee;

}

div > ul {

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

}

div:hover > ul {

  visibility: visible;

  opacity: 1;

}

<div>

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

  </ul>

</div>

jQuery .animate() change top with bottom property

There are a few keys to making this work. Here's a jsFiddle example.

$('a').click(function(){
    var offsetTop = $(this).offset().top;
    var footerOffsetTop = $('.footer').offset().top;
    $('.footer').css({position:'absolute',bottom:'',top:footerOffsetTop})
        .animate({top:offsetTop},500);
});

It essentially works like this:

1. Find the footer's offset().top value
2. Change the footer's CSS so that it is absolutely positioned with the
   top: property having the value found in #1. This keeps allows you to
   animate it's top property, without having it jump.

---

Related Topics