CODEWITHSUNDEEP
htmlcssanimationcss-transitionscss-position
ItsME
ItsME

Reputation: 65

Transition with absolute positioning

Please consider following example. Div which is the shape of ball does move but its sudden movement rather I want it to transition diagonally across the page to the bottom right corner. Why isn't that happening? What did I miss?

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
}
.one:hover {
  background: red;
  bottom: 0px;
  right: 0px;
}
<div class="one"></div>

Upvotes: 3

Views: 8341

Answers (3)

Vaibhav Bhanushali
Vaibhav Bhanushali

Reputation: 653

For transition to happen, you need values on both the parent and hover element selectior.

Here i just added proper values to both the selectors , and by subtracting their heights easily.

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}
<div class="one"></div>

These will work with most modern browsers . Also you can use pollyfill to make it work with backward browsers

For transition to happen, you need values on both the selectors.

Here in your case, the parent selector did not have any values of bottom or of left, but if you look at my code, both the parent and hover selectors have top and left value.

We just need to specify value so browser knows that where to start from

Upvotes: 3

thepio
thepio

Reputation: 6263

Just to give you an more complex example which does the transition on hover but continues it no matter where the mouse is + is reversible.

var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */

function mouseOver(element) {

  if (totalSeconds === 0) {
    var myTimer = setInterval(function() {
      countTime()
    }, 100);
  }

  function countTime() {
    ++totalSeconds;
    console.log(totalSeconds);
    if (totalSeconds >= (transitionTime / 100)) {
      stopTime();
      totalSeconds = 0;
      toggleClass = true;
    } else {

      toggleClass = false;
    }
  }

  if (toggleClass) {
    element.classList.toggle('moved');
  }

  function stopTime() {
    clearInterval(myTimer);
  }

}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.one {
  position: absolute;
  background: green;
  height: 100px;
  width: 100px;
  top: 0;
  left: 0;
  border-radius: 100px;
  transition: all 1000ms ease-in-out;
}
.one.moved {
  top: 100%;
  left: 100%;
  margin-top: -100px;
  margin-left: -100px;
  transition: all 1000ms ease-in-out;
}
<div class="one" onmouseover="mouseOver(this)"></div>

This example requires Javascript. There's some checks to see if the transition is complete so hovering the circle again won't reverse the transition etc.

JSFiddle to play around with

Upvotes: -1

rmarif
rmarif

Reputation: 548

you can try by giving these to hover state

  top:100%;
  left:100%;
  margin-top:-100px;
  margin-left:-100px;

check the codepen here http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Upvotes: 1

Related Questions