The existing questions do not cover this case. Height transition is not working when the text creates more rows. That's probably because I set no height, but I want't to keep changing it according to the text size. How can I create a smooth transition effect?
.content{
border: 1px solid blue;
min-height:30px;
width:120px;
transition: height 1s ease;
}
<div contenteditable="true" class="content">Type more...</div>
Related
I have input field with large padding. When it is focused or contains value padding is changed and this change is animated with css3 transition: all 0.5s; problem is that in chrome for transition duration element height changes from 42px to 41.998px and chrome renders that as 41px causing content to jump up by 1px during animation.
input {
padding: 10px;
transition:all 0.5s;
}
input:focus {
padding: 20px 10px 0;
outline:none;
}
<input type="text">
What's happening here is that you're actually animating 2 properties; padding-top is transitioning from 10px to 20px and padding-bottom is transitioning from 10px to 0px. Depending on various factors, your browser may struggle to animate both properties at exactly the same time - especially when the transition-property is set to all - leading to some "flickering" in the element's height as, currently, its height is calculated by adding together the line-height, padding and border.
One way to get around this would be to give the element a specific height so that that value does not have to be calculated at each stage during the transition.
input{
border:1px solid #999;
box-sizing:border-box;
height:42px;
line-height:20px;
outline:0;
padding:10px;
transition:padding .5s;
}
input:focus{
padding:20px 10px 0;
}
<input>
I've got (hopefully) a simple CSS problem, that I cannot get working.
If you go to http://new.therepairshack.com and take a look at the top search bar.
When you hover over it, it resizes to content width.
The CSS for this is here:
.header .search-wrapper .form-search .input-text {
background:rgba(0,0,0,0);
color:#000;
border-radius:0px;
border-bottom:1px solid #444;
}
.header .search-wrapper:hover,
.header .search-wrapper:hover .form-search,
.header .search-wrapper:hover form,
.header .search-wrapper:hover .input-text {
width:100%;
font-size:45px;
height:100px;
}
.header .search-wrapper,
.header .search-wrapper form,
.header .search-wrapper .form-search,
.header .search-wrapper .input-text {
transition: all 1.0s ease;
-webkit-transition: all 1.0s ease;
display:block;
}
Right now we're working on getting this functionality working in Chrome and Firefox. When I view it in chrome the background div instantly jumps to a larger height to fit the resized search bar, but when it resizes back down after you've left hover it does it smoothly.
My question: Is there any way to make the jumping go away? It's driving me nuts. I have added a transition to all of the elements that are moving when the search bar is being resized and that isn't working.
Also, what is the best way to get this working properly in other browsers? Thanks!!!
Let me know if you need anymore information!
It can't transition from an undefined starting point.
You must either
Specify an initial height on your .search-wrapper
http://jsfiddle.net/5h69j6uq/
Or, if your content must be dynamically sized, set the updated height by using the min-height: 100px property rather than the height: 100px property. min-height has a default value of 0 and will thus transition from that defined default value to 100px
http://jsfiddle.net/8t1beeLo/
You will have to manually set the height on the .header-top-container class and adjust it accordingly for the hover state.
CSS by standard will only apply animations to elements that are defined in rules to have them applied. And furthermore transitions will only be applied when there is a starting and end result, so inferred values such as height and width will not be animateable. Noticed I didn't say inherited values, as those technically have a starting value and therefore are animateable.
So for your CSS, you'll want something to this effect:
.header-top-container {
transition: height 1.0s ease;
-webkit-transition: height 1.0s ease;
height: 50px; /* change to whatever your height should be */
}
.header-top-container:hover {
height: 100px; /* the new height of the background */
}
Is it possible to trigger an animation with an another animation in CSS3 ? Or is it possible to make one animation to start just after when an another animation is finished ? I know it is possible with java script,but i want to know if it can be achieved with pure css3 ?
You can use transition-delay in conjunction with transition.
In my Snippet, the transition style causes div to change from:
Red to green in 1s.
100px to 250px width in 2s.
100px to 150px height in 1s.
The transition-delay style causes:
The first animation to occur immediately (background).
The second animation to occur after 1s (width).
The third animation to occur after 3s (height).
The end result is that each animation follows on the heels of the previous animation.
Snippet
div {
transition: background 1s, width 2s, height 1s;
transition-delay: 0s, 1s, 3s;
background: red;
width: 100px;
height: 100px;
border: 1px solid black;
}
div:hover {
background: green;
width: 250px;
height: 150px;
}
<div>
</div>
I have a hidden list on a page (opacity:0;visibility:hidden;) that is currently necessary for my menu.
My problem is that even though the z-index of the drop down part of the menu is -1 and the z-index of the content div is 50, the text inside of the content div only draws to the right of the menu. The css style display:none is not an option due to horrible resizing of elements that I don't want to deal with. Many Google and Stack Overflow searches produced no helpful results.
I have tried a variety of display settings including inline, float:left, and others that may have fixed the problem, but they didn't.
JSFiddle here which clearly defines the problem (try the second menu to see the cutoff point):
http://jsfiddle.net/nimsson/311g9h16/5/
I would like to know either
a) the reason behind this functionality
b) a workaround / solution
or both.
Thanks,
nimsson
Simply workaround You have here: http://jsfiddle.net/311g9h16/6/
I've just change #content {position: absolute} but why display: none is not an option?? Resizing should be no problem when You set height of dropdown.
Moreover, You can do this effect with some CSS - take a look: http://www.cssterm.com/css-menus/horizontal-css-menu/simple-drop-down-menu
try this: http://jsfiddle.net/311g9h16/7/
all I did was changing the way you use positioning and adjust the width to get the text to align left.
For info on position properties go here: http://www.w3schools.com/cssref/pr_class_position.asp
#content {
background-color: rgba(204,0,0,0.4);
border: 5px solid rgba(204,51,0,1);
border-radius: 10px;
position: absolute;
bottom: 500px;
color: white;
text-align: left;
width: 500px;
z-index: 50;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
You could add another div around the #content and re-set the page for the containing divs,
<div id="background">
.... </div>
css
#background{
z-index:-1;
position: absolute;
width:100%;
height:100%;
}
I have a form and I want to display help text. The text might be a bit longer at times. I want to set a fixed width to the div containing the help text and make it grow by height. Then, to align the middle of the help text to the relative input. I'm flexible with the structure of the HTML.
This is a fiddle with the form and the help text.
CSS
.form-parameter {
display : block;
}
.form-parameter label , .form-parameter input {
width : 150px;
display : inline-block;
}
.form-parameter-helptext {
width : 150px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.1s linear;
}
.form-parameter:hover .form-parameter-helptext {
visibility : visible;
opacity: 1;
}
All I found so far is how to align a div relative to a parent but not a sibling.
I set the width of form-parametr to 530px and add position:relative to it,and for your help div I add position:abolute;right:0;top:0;width:200px
as far as I know you cannot align the middle of the help text to the relative input with only html and css but I think this is what you want beside the aligning help text : DEMO
and for the record you need to set display:block to this div when you want your width to work,and you want help to be invisible,you've used visibility : hidden this way you just hidden that div but as you can see there is a white space that hold place for your help text,if you want to remove that white space ,you should usedisplay:none instead
Try this:
.form-parameter-helptext {
visibility: hidden;
color: #333;
background-color: #EEE;
border: 2px solid lightblue;
font-size: 13px;
padding: 5px;
margin-right: 10px;
opacity: 0;
-webkit-transition: opacity 0.1s linear;
/* This is what I added */
width:100px; // add the width
position:absolute; // set the position to absolute
}
I didn't test it on any browser or webpage but the fiddle works fine.