A CSS transition with a delay set to ease-out without an ease-in effect

Question

A CSS transition with a delay set to ease-out without an ease-in effect

I currently have a basic menu setup with a dropdown feature. The dropdown displays correctly with the following CSS property:

-webkit-transition: all 0.4s ease-in-out;

However, I am attempting to modify it to only transition based on height while maintaining the 0.4s ease-in effect. Additionally, I would like to introduce a 1s delay for the ease-out transition.

I have experimented with the following code:

-webkit-transition: height 0.4s ease-in, height 0.4 ease-out 1s;

Unfortunately, this implementation also applies the delay during the ease-in transition.

The desired outcome is for the ease-out transition to trigger when hovering over an element but without any delay while easing out.

Am I facing limitations or making a mistake in my approach?

css css-transitions

Answer 1

Answer №1

When you initiate an animation with 'ease-in', it will work at the beginning of the animation. Conversely, using 'ease-out' will make it function towards the end. You have the flexibility to add a different animation when hovering and personalize it according to your preferences.

Answer 2

When you initiate an animation with 'ease-in', it will work at the beginning of the animation. Conversely, using 'ease-out' will make it function towards the end. You have the flexibility to add a different animation when hovering and personalize it according to your preferences.

Answer 3

Answer №2

I finally stumbled upon an example that appears to be effective, and I have created a small prototype here: https://codepen.io/andrelange91/pen/zYRyRyw

In this demonstration, I separated the two elements, resulting in a hover on and hover off effect.

.box {
  height:100px;
  // hover off
  transition: height 0.4s ease-out 1s;
  &:hover{
    // hover on
    transition: height 0.4s ease-in;
    height:150px;
  }
}

Answer 4

I finally stumbled upon an example that appears to be effective, and I have created a small prototype here: https://codepen.io/andrelange91/pen/zYRyRyw

In this demonstration, I separated the two elements, resulting in a hover on and hover off effect.

.box {
  height:100px;
  // hover off
  transition: height 0.4s ease-out 1s;
  &:hover{
    // hover on
    transition: height 0.4s ease-in;
    height:150px;
  }
}

A CSS transition with a delay set to ease-out without an ease-in effect

Answer №1

Answer №2

Similar questions

Do mouse users prefer larger buttons on RWD sites for a better experience?

alternative for firebug in internet explorer

Sleek CSS3 Slide Menu - Smooth Transition to Top when Sliding

What is the best way to create an oval-shaped background for a div element?

Problem of background and shadow blending in CSS

CSS tutorial: Creating circular image borders and outlines with CSS

Questions about CSS

Utilizing the map function in React to create a button reference

Adjustable width (100%) and set height for SVG

What should we name this particular style of navigation tab menu?

How can you easily ensure your React web app is responsive?

Correct punctuation will not be displayed accurately

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Creating structured layout with Bootstrap 4 Grid System

Ways to animate elements while scrolling in React.js?

What is the best way to insert a vertical line divider between two tabs?

Element floating over, intersecting with the main content of the page

Finding and removing a specific CSS pattern from a webpage that has been loaded

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

Use jQuery to dynamically alter color based on conditional statements