A guide on creating a downward animation of an object using CSS3

Question

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want the box to start falling when the mouse hovers over it.

Below is the code I have so far:

<p class="exp9"><strong>box</strong></p>

strong {
    margin-top: 20em;
}

p:hover strong {
    display: block;
}

p:hover strong:hover {
    margin-top: 20em;
}

Unfortunately, my current code only causes the text inside the box to drop down. Any suggestions or ideas would be greatly appreciated. Thank you!

css

Answer 1

Answer №1

Implement this animation in your code:

/* New items that are added will start faded out and move up 400px on the y-axis */
li.new-item {
    opacity: 0;
    animation: new-item-animation .3s linear forwards;
}

@keyframes new-item-animation {
    from {
        opacity: 0;
        transform: translateY(-400px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Answer 2

Implement this animation in your code:

/* New items that are added will start faded out and move up 400px on the y-axis */
li.new-item {
    opacity: 0;
    animation: new-item-animation .3s linear forwards;
}

@keyframes new-item-animation {
    from {
        opacity: 0;
        transform: translateY(-400px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Answer 3

Answer №2

Check out this simple example to get started:

<div class="container">
    <p class="content">
        Hover Over Me
    </p>
</div>

CSS Styles:

.content {
    width: 200px;
    height: 30px;
    background-color: lightGreen;
    text-align: center;
    padding: 10px 0;
}

.container {
    display: inline-block;
    transition: 0.3s all linear;
}

.container:hover {
    padding-top: 20em;
}

When integrated into your HTML:

strong {
    text-align: center;
    padding: 10px 20px;
}

p {
    display: inline-block;
    transition: 0.3s all linear;
}

p:hover {
    padding-top: 20em;
}

Answer 4

Check out this simple example to get started:

<div class="container">
    <p class="content">
        Hover Over Me
    </p>
</div>

CSS Styles:

.content {
    width: 200px;
    height: 30px;
    background-color: lightGreen;
    text-align: center;
    padding: 10px 0;
}

.container {
    display: inline-block;
    transition: 0.3s all linear;
}

.container:hover {
    padding-top: 20em;
}

When integrated into your HTML:

strong {
    text-align: center;
    padding: 10px 20px;
}

p {
    display: inline-block;
    transition: 0.3s all linear;
}

p:hover {
    padding-top: 20em;
}

Answer 5

Answer №3

Uncertain if this is the desired outcome.

p{
  width: max-content; /*include this if you don't want the paragraph to occupy the entire width*/
}
p strong{
  display: block;
}
p:hover strong{
  animation: fall .1s linear forwards;
}
@keyframes fall{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(20em);
  }
}

<p class="exp9"><strong>box</strong></p>

Answer 6

Uncertain if this is the desired outcome.

p{
  width: max-content; /*include this if you don't want the paragraph to occupy the entire width*/
}
p strong{
  display: block;
}
p:hover strong{
  animation: fall .1s linear forwards;
}
@keyframes fall{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(20em);
  }
}

<p class="exp9"><strong>box</strong></p>

A guide on creating a downward animation of an object using CSS3

Answer №1

Answer №2

Answer №3

Similar questions

Placement of BOX alongside each other

Tips for updating the CSS properties of the "html" element

Ways to conceal the label without using JavaScript when focusing

Exploring the world of using Bootstrap containers, rows, and columns

The error at line 72 of proxyConsole.js is: TypeError - Unable to access the 'default' property of an undefined object

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

Tips for setting the style of child components in a ReactJS project with CSS modules, classNames, and JSX syntax

Flexbox functionality with a specific focus on Kindle Fire device compatibility

Trouble with JavaScript loading in HTML webpage

Revamp and Enhance Your Layout Using Bootstrap Cards

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

Is the row border camouflaged by the background?

Using unicode characters to style your Angular application

The callback function fails to execute the click event following the .load() method

Which is better for creating hover effects: CSS3 or JavaScript?

How come padding-bottom isn't effective in increasing the position of an element?

Conceal the background of the lower div when the top div is displayed

How can I apply max-width and max-height to a background image?

Experience the combined power of addthis, isotope, and nicescroll - all in a single

Using @font-face to apply a font on an SVG file is not supported