Moving smoothly while retaining absolute positioning

Question

Moving smoothly while retaining absolute positioning

I have a question about a particular scenario. I have a div element that is styled like a ball and I want it to transition diagonally across the page to the bottom right corner instead of moving suddenly. However, this is not happening as expected. Can you please help me understand what I missed in my code?

.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>

html css animation css-transitions css-position

Answer 1

Answer №1

To facilitate a smooth transition, it is essential to define values for both the parent and hover element selectors.

In this instance, I have assigned appropriate values to both selectors, allowing for easy calculation of their heights.

.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>

This functionality is compatible with most modern browsers. Additionally, utilizing polyfills can extend its support to older browsers.

Transition requires values on both selectors to function properly.

In your scenario, the parent selector lacks 'bottom' or 'left' values, whereas in my code, both the parent and hover selectors contain 'top' and 'left' values.

The key is to explicitly specify values so that the browser knows where to initiate the transition.

Answer 2

To facilitate a smooth transition, it is essential to define values for both the parent and hover element selectors.

In this instance, I have assigned appropriate values to both selectors, allowing for easy calculation of their heights.

.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>

This functionality is compatible with most modern browsers. Additionally, utilizing polyfills can extend its support to older browsers.

Transition requires values on both selectors to function properly.

In your scenario, the parent selector lacks 'bottom' or 'left' values, whereas in my code, both the parent and hover selectors contain 'top' and 'left' values.

The key is to explicitly specify values so that the browser knows where to initiate the transition.

Answer 3

Answer №2

One possible solution is to define a hover state with the following properties:

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

To see an example, you can visit the codepen link: http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 4

One possible solution is to define a hover state with the following properties:

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

To see an example, you can visit the codepen link: http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 5

Answer №3

Here is a more advanced example showcasing a hover transition that continues no matter where the mouse is and can be reversed.

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

function onMouseOver(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="onMouseOver(this)"></div>

This demonstration utilizes Javascript with checks to ensure completion of the transition so hovering over the circle again will not reverse the effect.

Explore this JSFiddle for experimentation

Answer 6

Here is a more advanced example showcasing a hover transition that continues no matter where the mouse is and can be reversed.

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

function onMouseOver(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="onMouseOver(this)"></div>

This demonstration utilizes Javascript with checks to ensure completion of the transition so hovering over the circle again will not reverse the effect.

Explore this JSFiddle for experimentation

Moving smoothly while retaining absolute positioning

Answer №1

Answer №2

Answer №3

Similar questions

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

Employing jQuery to implement a hover animation on IE9, it functions properly when hovering over but exhibits strange behavior upon exiting

Bring JavaScript Function into Vue's index.html File

Tips for designing a horizontal sub-navigation menu using CSS?

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

Capturing keydown events exclusively in the topmost layer of the HTML document

Secondary menu supersedes primary dropdown menu

Troubleshooting: ReactJS ReactCSSTransitionGroup animation not being applied

Display the div only after all images have finished loading in response to the AJAX call

Make the background image come to life by animating it from the bottom to the top in

The value property of the input element is returning as undefined

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

Interact with HTML Radio Buttons to Trigger Input Opening

The "html" element fails to achieve a full height when applying a 100% height setting

Website route organization tool

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

Ways to resize column widths in tree views on Odoo version 10?

The effect of iPad screen orientation on CSS styling

Exploring Rails 6: Enhancing Web Design with CSS Image Display

reconfigure form credentials with JavaScript