How can I transition width of content with width: auto?
As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
Stack snippet
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom;}.myspan::after { content: " \00a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: max-width .6s; vertical-align: bottom; overflow: hidden;}.myspan:hover::after { max-width: 80px; transition: max-width 1s;}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>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-->JavaScript Moving transition without the use of CSS
There's a whole bunch of ways to do this, as you can see in the other answers, each with its own "feel". I'm just adding one more, where the dot approaches the cursor by a percentage of the remaining distance.
let curX = 0, curY = 0, elemX = null, elemY = null;document.body.addEventListener("mousemove", function(e) { curX = e.clientX; curY = e.clientY; if (elemX === null) [ elemX, elemY ] = [ curX, curY ];});
let amt = 0.1; // higher amount = faster tracking = quicker transitionlet elem = document.querySelector('mouse');let frame = () => { requestAnimationFrame(frame); elemX = (elemX * (1 - amt)) + (curX * amt); elemY = (elemY * (1 - amt)) + (curY * amt); elem.style.left = `${elemX}px`; elem.style.top = `${elemY}px`;};frame();body { position: absolute; background: #333; left: 0; top: 0; margin: 0; padding: 0; height: 100%; width: 100%;}mouse { display: block; position: absolute; height: 20px; margin-left: -10px; width: 20px; margin-top: -10px; background: #fff; border-radius: 50%;}<body> <mouse></mouse></body>How to set CSS animation speed without JavaScript?
Here is an idea where you can consider the use of position:sticky but I will change how the animation should work.
Using CSS (or even JS) it's impossible to have at once:
- the same start
- the same end
- the same speed.
You can only have 2 of them. In your solution you had the (1) and (2) and below you will have the (2) and (3)
.container { overflow:hidden;}.div1 { clip-path: polygon(0 0, 300px 0, 300px 100%, 0 100%); overflow: hidden; display: inline-flex; white-space: nowrap; flex-direction: column;}
.content { color: white; margin:5px 0; padding:0.5em 0; background: #A1BDAF; position: relative; animation: moving 6s ease-in-out forwards; left: 0;}
.content span { display: inline-block; position: sticky; left: 0;}
@keyframes moving { to { left: calc(300px - 100%); }}<div class="container"> <div class="div1"> <h1 class="content"> <span>The only thing that matters now is everything You think of me</span> </h1>
<h1 class="content"> <span>I want to fix the speed of running text animation </span> </h1>
<h1 class="content"> <span> regardless of the length of the text.</span> </h1>
<h1 class="content"> <span> Is there any way to set not duration but speed of animation</span> </h1>
<h1 class="content"> <span> with out JavaScript?</span> </h1> </div></div>How can I transition height: 0; to height: auto; using CSS?
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.
See JSFiddle demo provided by Chris Jordan in another answer here.
#menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5;}
#menu:hover #list { max-height: 500px; transition: max-height 0.25s ease-in;}<div id="menu"> <a>hover me</a> <ul id="list"> <!-- Create a bunch, or not a bunch, of li's to see the timing. --> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul></div>No CSS transition for 'height: fit-content'
As Mishel stated another solution is to use max-height. Here is a working example of that solution.
The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.
Hope this helps.
https://www.w3schools.com/css/css3_transitions.asp
document.querySelector('button') .addEventListener( 'click', () => document.querySelectorAll('div') .forEach(div => div.classList.toggle('closed')));div { background-color: lightblue; border: 1px solid black; overflow-y: hidden; max-height: 75px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(1, 1, 1, 1);}div.closed { max-height: 0;}<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1><div class="div1">some text<br />even more text<br />so much text</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1><div class="div2">some text<br />even more text<br />so much text</div>CSS transition auto height not working
One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...
Here's a DEMO
You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.
Hope this helps!
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left;}.ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{ background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);}
.ac-container input{ display: none;}.ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{ -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/}<div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p> </section> <label for="ac-1">About us</label> </div>
<div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label></div></div>How can I transition height: 0; to height: auto; using CSS?
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.
See JSFiddle demo provided by Chris Jordan in another answer here.
#menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5;}
#menu:hover #list { max-height: 500px; transition: max-height 0.25s ease-in;}<div id="menu"> <a>hover me</a> <ul id="list"> <!-- Create a bunch, or not a bunch, of li's to see the timing. --> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul></div>Related Topics
Chrome Ignoring Flex-Basis in Column Layout
Chrome and It's Handling of %S
Why Do You Put a Display:Block on an "A" Tag That Is Inside a List
Chrome Dev Tools Rgba/Hsl Conversion to Some New Format
Svg <Mask> Tag Required for Firefox But Appears to Break CSS Mask in Chrome
Preventing Horizontal Scrolling in Mobile Devices
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
Right Aligned Bootstrap Container Which Also Aligns with Default Container
How to Remove the Underline of a Link in Chrome Using CSS
Variable Sized Column with Ellipsis in a Table
:Hover Not Working on Svg When Svg Is in External File
Target First Letter of Each Word in CSS
Stop Animation from Replaying When Parent Switches from Display:None to Block
CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate