CSS Transition Ignores Width

CSS width transition not working at all

Try this:

header nav ul li a:hover{}
header nav ul li a:hover span{
    width: 100%; /* YOU'LL NEED TO ADJUST THIS, IT CANNOT BE AUTO*/
    overflow: visible;
    text-align: right;
}

header nav ul li a span{
    position: absolute;
    width: 0;
    right: 45px;
    overflow: hidden;
    transition:width 0.25s;
    -webkit-transition:width .25s;
    -moz-transition: width 0.25s;
    font-size: 16px;
    display:block; /*HERE IS MY OTHER CHANGE*/
}

http://jsfiddle.net/ZUhsn/4/

Two issues:

Firstly, span is an inline element by default, so it doesn't have a width like you would expect. By applying display:block;, we turn it into a block-level element with width.

Secondly, you were transitioning to a width value of 'auto'. Transitions can only animate across numerical values, so you'll have to give your ending transition a measurement with units.

CSS transition ignores width

When you set width using animation you will override any other width defined with CSS inluding the one defined by hover. The styles inside a keyframes is more specific than any other styles:

CSS Animations affect computed property values. This effect happens by
adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the
level for CSS Animations) that will produce the correct computed value
for the current state of the animation. As defined in [CSS3CASCADE],
animations override all normal rules, but are overridden by !important
rules. ^ref

A workaround is to consider both width/max-width properties to avoid this confusion:

.home-bar {  text-decoration: none;  background-color: white;  color: #5e0734;  display: block;  animation: grow0 1.5s forwards;  transition: color, background-color, max-width 0.2s linear;  border: 2px solid #5e0734;  max-width: 75%; /*Set max-wdith*/}
.home-bar:hover {  background-color: #5e0734;  color: white;  max-width: 100%; /* Update the max-width of hover*/  text-decoration: none;}
/*Animate width to 100%*/@keyframes grow0 {  from {    width: 10%;  }  to {    width: 100%;  }}

<a href="#" id="bar0" class="home-bar">LINK</a>

Transition property on input width not working

It's because your input does not have width property in default state its auto.

Transition will not work auto to some value.

just add width property to input. it will work.

Here is the working code.

.main-container {  border: 1px solid #000;  width: 45%;  text-align: center;}
input {  width: 120px;  padding: 8px;  border-radius: 7px;  transition: width 3s;  border: 2px solid #222;}
input:hover {  border: 2px solid green;  width: 300px;}

<div class="main-container">  <h1>To-Do List</h1>  <input type="text" id="input-field" placeholder="enter new item" />  <button id="btn-add-item">Add Item</button>  <button id="btn-remove-item">Remove Last Item</button>  <ul></ul></div><!--end of main container-->

Css transition ignore the animation

As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)

.img-thumb {  position: relative;  display: inline-block;  margin: 0 1em 1.5em 0;  border: 1px solid #bbb;  font-size: 12px;  cursor: pointer;  transition: max-width 1s ease-in;    overflow:hidden;   /* add these 2 */  max-width:100%;  /* may want to change this to be width of your image to remove the delay from the beggining of the animation */}
.disapear {  /* this needs to appear after the above style */  max-width: 0px;  border: 0;     /* hide border */}

<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">  <img src="http://via.placeholder.com/100x100"></div>

Is it possible to use CSS transition of width on a column depending on the content of a table cell?

I did not find a good way to do it with css but it is quite easy to do with js. I settled on using the mouseenter and mouseleave event to trigger an animation of the width on the target element using the anime.js library which is quite easy to use when animating css properties.

CSS transition being ignored

A css transition cannot be applied to a class that is transitioning from display: block; to display: none;

Using opacity or visibility can solve this problem.

Here's a JSFiddle example. The Circle is using a transition from display: block to display: none and the Square is using opacity.

CSS width transition without auto

Width auto and a fixed width can't be animated. What you can do is change the max-width.

.element{
   max-width: 0;
   width: 0;
   transition: your transition style
}
.element.active{
   max-width: 9999px;
   width: auto;
}

I'll hope this helps

How to reverse CSS animation when using both width and max-width

1. Put the transition property in the sidebar class.
2. set the transition property only once (separate the orders with comma). Otherwise the second order will override the first order.

const toggle = () => {
    $('.sidebar').toggleClass('grow');
}

.sidebar {
  width: 40vw;
  max-width: 300px;
  background: blue;
  height: 200px;
  transition: width 500ms ease-in-out, max-width 500ms ease-in-out;
}

.sidebar.grow {
    width: 90vw;
    max-width: 90vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<button onClick="toggle()">Toggle Growth</button>
<div class="sidebar"></div>
</html>

---

Related Topics