CSS Transitions Between Absolute and Relative Positioning

CSS transitions between absolute and relative positioning

No, you can't animate the position property. There are only a number of css properties you can animate, and most of them have numbers or colors as values (With some exceptions). You can see this list in the w3c css transitions especification.

Anyway, since you can animate top and left properties, you could change your markup a little to achieve the effect.

I just set the original position to absolute and positioned those elements. Then, when toggling the class, only top and left attributes change, so the transition works.

$('button#toggler').click(function() {
  $('div.deck-container').toggleClass('collapsed');
});

div.deck-container {
  position: relative;
}

div.deck-container li {
  background-color: #fff;
  position: absolute;
  border: 1px solid black;
  padding: 3px;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}

div.deck-container li {
  left: 160px;
  top: 0px;
}

div.deck-container li:first-child {
  left: 0px;
  top: 0px;
}

div.deck-container li:nth-child(2) {
  left: 40px;
  top: 0px;
}

div.deck-container li:nth-child(3) {
  left: 80px;
  top: 0px;
}

div.deck-container li:nth-child(4) {
  left: 120px;
  top: 0px;
}

div.deck-container.collapsed li {
  left: 12px;
  top: 8px;
}

div.deck-container.collapsed li:first-child {
  left: 0;
  top: 0px;
}

div.deck-container.collapsed li:nth-child(2) {
  left: 3px;
  top: 2px;
}

div.deck-container.collapsed li:nth-child(3) {
  left: 6px;
  top: 4px;
}

div.deck-container.collapsed li:nth-child(4) {
  left: 9px;
  top: 6px;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
}

<div class="deck-container">
  <ul>
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>
    <li>Card 4</li>
    <li>Card 5</li>
  </ul>
</div>

<button id="toggler">Toggle state</button>

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

css animation change from absolute to relative

Not too sure what you mean by this:

...need a relative position since the animation should stay on top of the page.

...but I digress.

Add a containing div with relative positioning

<div class="oceanContainer">
    <div class="ocean">
        <div class="wave"></div>
        <div class="wave"></div>
    </div>
</div>

with CSS

.oceanContainer {
    position: relative;
    height: 100% /* you can play around with this for your header */
}

You may need to adjust some of the other CSS though

.ocean {
  height: 5%; /* as above, adjust to %, px, (r)em's to your liking */
  bottom: 0;
}

.wave {
  bottom: 0;    /* change top to bottom */
}

.wave:nth-of-type(2) {
  bottom: 0;    /* change top to bottom */
}

Smooth CSS transition from position relative to position absolute with :hover::after

As Paulie_D mentioned, you can't do transitions on position attributes. See: https://www.w3schools.com/cssref/pr_class_position.asp "Animatable: no."

Several other attributes are fair game though. Here's one using the width and the border:

div {
  display: flex;
  align-items: center;
  color: #ab9b8c;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-decoration: none;
  height: 100%;
  cursor: pointer;
  transition: height 2s;
  position: relative;
}

div::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 0px;
  height: 3px;
  border-radius: 200px;
  border: 0px solid #9f9182;
  transition: all 0.2s linear;
}

div:hover::after {
  width: 30px;
  border: 1px solid #9f9182;
  transition: all 0.2s linear;
}

<div>test
</div>

absolute position smooth transition

You can simplify your code like this:

#header {

  position: fixed;

  top: 5vh;

  left: 50%;

  transform: translateX(-50%);

  z-index: 1;

  cursor: pointer;

}

nav.menu {

  background: 

    linear-gradient(#3d3d3d,#3d3d3d) top,

    linear-gradient(#3d3d3d,#3d3d3d) center,

    linear-gradient(#3d3d3d,#3d3d3d) bottom;

  background-size:100% 1px;

  background-repeat:no-repeat;

  width: 30px;

  height: 15px;

  transition: background-position 1s;

}

nav.menu:hover {

  background-position:center;

}

<header id="header">

  <nav class="menu">

  </nav>

</header>

CSS transition position absolute from one edge to the other

You should keep using the top and right on the clicked below. Just use a calc to position them like below

var ele = document.getElementById("my-box");

ele.addEventListener("click", function() {

 ele.classList.toggle("clicked");

});

.box {

    position: absolute;

    top: 0px;

    right: 0px;

    width: 100px;

    height: 100px;

    background-color: red;

    transition: all 0.7s ease;

}

.box.clicked {

  top: calc(100% - 100px);

  right: calc(100% - 100px);

}

<div class="box" id='my-box'>

</div>

relative positioning with transition effect

Your problem is the display property. Your animation is made while display: none;, which isn't really useful. Just remove this display definitions and the animation will work fine.

(I changed the color of the captions to black in the snippet to view them)

a:hover img{

 -webkit-transform: translateY(-20px);

 -moz-transform: translateY(-20px);

 -ms-transform: translateY(-20px);

 transform: translateY(-20px);

}

a:hover .caption{

 opacity: 1;

 -webkit-transform: translateY(-10px);

 -moz-transform: translateY(-10px);

 -ms-transform: translateY(-10px);

 transform: translateY(-10px);

 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;

 -moz-transition: -moz-transform 0.4s, opacity 0.1s;

 transition: transform 0.4s, opacity 0.1s;

}

figure{

 overflow: hidden;

}

figure img{

 height: 105px;

 width: 120px;

 padding: 20px 0px 0px 0px;

 display: flex;

 -webkit-transition: -webkit-transform 0.4s;

 -moz-transition: -moz-transform 0.4s;

 transition: transform 0.4s;

}

.caption{

 font-size: 1.4em;

 color: #000;

 position: relative;

 -webkit-transform: translateY(100%);

 -moz-transform: translateY(100%);

 -ms-transform: translateY(100%);

 transform: translateY(100%);

 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;

 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;

 transition: transform 0.4s, opacity 0.1s 0.3s;

}

a{

 text-decoration:none;

 outline:none;

 color: $fff;

}

.btn-row{

 margin: 30px 0px 0px 0px;

 display: inline-flex;

}

.box-btn{

 height: 150px;

 width: 150px;

 border-radius: 10px;

 border: 1px solid #bdc1c4;

 background-color: $white;

 margin: 0px 10px 0px 10px;

 outline: none;

}

<center><br>

 <div class="btn-row">

 <a href="domainSearch.html" class="link">

  <figure class="box-btn">

   <img src="style/img/university.jpg" class="img">

   <figcaption class="caption">xyz</figcaption>

  </figure>

 </a>

 <a href="domainSearch.html" class="link">

  <figure class="box-btn">

      <img src="style/img/university.jpg" class="img">

   <figcaption class="caption">xyz</figcaption>

  </figure>

 </a>

 <a href="domainSearch.html" class="link">

  <figure class="box-btn">

   <img src="style/img/university.jpg" class="img">

   <figcaption class="caption">abcdefghijkl </figcaption>

  </figure>

 </a>

</div>

<div class="btn-row">

 <a href="domainSearch.html" class="link">

  <figure class="box-btn">

   <img src="style/img/university.jpg" class="img">

   <figcaption class="caption">short text</figcaption>

  </figure>

 </a>

    <a href="domainSearch.html" class="link">

  <figure class="box-btn">

   <img src="style/img/university.jpg" class="img">

   <figcaption class="caption">long text coming here

            </figcaption>

  </figure>

   </a>

    <a href="domainSearch.html" class="link">

     <figure class="box-btn">

      <img src="style/img/university.jpg" class="img">

      <figcaption class="caption">defghi</figcaption>

     </figure>

    </a>

   </div>

  </center>

CSS animate a div with absolute positioning from left 0 to right 0

You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.

Also need to animate background color.

.container {

 position: relative;

 width: 80%;

 height: 100px;

 border: 1px solid black;

}

.animated {

 position: absolute;

 width: 20%;

 height: 100%;

 top: 0;

 background-color: red;

 animation: 3s linear 0s slide infinite;

}

@keyframes slide {

  from { left: 0; }

  to {

    left: 100%;

    transform: translateX(-100%);

    background: blue;

  }

}

<div class=container>

<div class=animated>

</div></div>

---

Related Topics