How to make a CSS transition work "backwards"?

transition css
css transition: all
css transitions examples
css transition: transform
css transition display
css animation
transition css hover
css transition not working

So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen

HTML:

<div class="object">

<p>Object</p>

</div>

CSS:

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

How would I go about doing this, as simple as possible? Thank you ;3


Transitions work in both directions automatically.

The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.

This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.

But when you unhover it, it becomes none instantly and you can't see the width animating.

Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.

Add:

border-bottom: 0px solid white;

to the rules for p.

Understanding CSS3 Transitions – A List Apart, value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element's class attribute). CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).


Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D

Transitioning Multiple Properties, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Transition on Hover. CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Add a transition effect (opacity and background color) to a button on hover:


I don't know if this could help, but in my case I just did like this:

Over:

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

No over:

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}

CSS Animatable, CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element's class attribute). Transitions. Transitions in CSS allow you to easily animate elements by changing properties and letting the browser calculate the values in between. Specifying a transition effect is extremely easy using the transition property. In our first example, let's create a blank page that when hovered will smoothly animate to a black background:


for transition add an animate class to the element you want the transition

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

Now when you add this class to your element it will make transition in both hover and hover out.

Using CSS transitions, Here is a simple example that transitions the background color of a <div> element on :hover: div { transition: background-color 0.5s ease;  CSS transitions offers many new possibilities to enhance user interfaces. Creating animation or transition effects with CSS3 are less complicated as compared to Flash and JS. If you already familiar with CSS and HTML5 code , then you can add great new effects with ease.


CSS Transitions, Let's start with CSS transitions. Transitions are examples. However, you may want to include prefixes to ensure it works in modern browsers. The transition-property specifies the CSS property where the transition will be applied. You may apply a transition to an individual property (e.g., background-color or tranform) or to all properties in the rule-set (i.e., all ).


transition, CSS Transitions are the most simple way to create an animation in CSS. In a transition, you This Glitch shows how those work in practice. onclick=filterSelection custom method is removed. JS retrieves the class to apply using the data-target-filter attr. CSS transitions rules are updated with your options ( .all, .car, .animals, .fruits instead of example .option-1,.option-2,.option-3) so they match when the value is applied as a class on #bar-filter.


CSS Transitions and Transforms for Beginners, This document was produced by the CSS Working Group (part of the Style In the case where the lists of values in transition properties do not  This series will focus on teaching you the basics of CSS animation. And today I will be teaching you how to use transition shorthand. But before we continue I would like to inform you about why