When incorporating a CSS transition, a div element gracefully descends from the top of the HTML body

Question

When incorporating a CSS transition, a div element gracefully descends from the top of the HTML body

I am relatively new to html/css and have encountered a slight issue while trying to add transitions to a div element. When I hover over the div element, I would like it to smoothly transition its background-color from red to black.

Here is the code snippet for my html and css:

body {
  margin: 0;
}

.example1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  -webkit-transition: all 1s linear;
}

.example1:hover {
  background-color: black;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>
  <link rel="stylesheet" href="transitions.css" />
  <link rel="stylesheet" href="normalize.css" />
</head>

<body>
  <div class="example1"></div>
</body>

</html>

This demonstrates the outcome: https://youtu.be/5whZpt0YR68

The color transition functions as intended, but when the html file is opened, the div element slides down from the top of the body until it reaches its final position (unanticipated movement). This behavior is observed in Google Chrome, Opera, and Microsoft Edge, but not Firefox.

Any insights on why this anomaly might be occurring?

html css

Answer 1

Answer №1

It is recommended to update this section in your CSS:

transition: all ...

to

transition: background-color ...

For instance:

body {
  margin: 0;
}

.sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

.sample1:hover {
  background-color: black;  
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>
  <link rel="stylesheet" href="transitions.css" />
  <link rel="stylesheet" href="normalize.css" />
</head>

<body>
  <div class="sample1"></div>
</body>

</html>

To enhance the visual effect further, you can also utilize a small amount of Javascript. For example:

let sample = document.querySelector('.sample1');

sample.addEventListener('mouseover', (e) => {
e.target.classList.remove('out_sample1');
});

sample.addEventListener('mouseout', (e) => {
e.target.classList.add('out_sample1');
});

body {
  margin: 0;
}
.out_sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
  background-color: red;
}
.sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

.sample1:hover {
  background-color: black;  
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>
  <link rel="stylesheet" href="transitions.css" />
  <link rel="stylesheet" href="normalize.css" />
</head>

<body>
  <div class="sample1"></div>
</body>

</html>

Answer 2

It is recommended to update this section in your CSS:

transition: all ...

to

transition: background-color ...

For instance:

body {
  margin: 0;
}

.sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

.sample1:hover {
  background-color: black;  
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>
  <link rel="stylesheet" href="transitions.css" />
  <link rel="stylesheet" href="normalize.css" />
</head>

<body>
  <div class="sample1"></div>
</body>

</html>

To enhance the visual effect further, you can also utilize a small amount of Javascript. For example:

let sample = document.querySelector('.sample1');

sample.addEventListener('mouseover', (e) => {
e.target.classList.remove('out_sample1');
});

sample.addEventListener('mouseout', (e) => {
e.target.classList.add('out_sample1');
});

body {
  margin: 0;
}
.out_sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
  background-color: red;
}
.sample1 {
  margin: auto;
  margin-top: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

.sample1:hover {
  background-color: black;  
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>
  <link rel="stylesheet" href="transitions.css" />
  <link rel="stylesheet" href="normalize.css" />
</head>

<body>
  <div class="sample1"></div>
</body>

</html>

Answer 3

Answer №2

Make sure to eliminate any unnecessary CSS files that may be impacting the design.

body {
    margin: 0;
}

.example2 {
    margin: auto;
    margin-top: 50px;
    width: 150px;
    height: 150px;
    background-color: blue;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
}

.example2:hover {
    background-color: green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Test Page</title>
</head>
<body>
    <div class="example2"></div>
</body> 
</html>

Answer 4

Make sure to eliminate any unnecessary CSS files that may be impacting the design.

body {
    margin: 0;
}

.example2 {
    margin: auto;
    margin-top: 50px;
    width: 150px;
    height: 150px;
    background-color: blue;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
}

.example2:hover {
    background-color: green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Test Page</title>
</head>
<body>
    <div class="example2"></div>
</body> 
</html>

When incorporating a CSS transition, a div element gracefully descends from the top of the HTML body

Answer №1

Answer №2

Similar questions

Modifying properties through JavaScript is not possible

Struggling to connect HTML elements with AngularJS and TinyMCE?

Is it possible to use HTML code as content in CSS?

How come my web page is not displaying the guages from guage.js?

javascriptretrieve the second class from the element

What is the best way to ensure a jQuery function runs on duplicated elements?

Utilizing JavaScript XHR to Organize Data Retrieved from an API

Adding gradient to the background cover photo

What could be the reason why this LESS CSS is not taking effect?

What is the best way to extract HTML elements during the process of web scraping?

Steps to eliminate the x icon from the text box that appears automatically in Internet Explorer

What is the secret behind positioning the tooltip correctly using 'relative' placement?

Creating a seamless video texture loop using PixiJS

Is there a way for me to remove an uploaded image from the system

Showcasing a dynamic image as a task is being completed within a JavaScript function

Having trouble with your Bootstrap Accordion panels?

Hiding the C3 tooltip after engaging with it

Creating a PDF document using HTML code

Switching background images using a JavaFX Button click

Is it possible to rotate just the camera in ThreeJS by dragging the mouse within the scene?