This was originally for transitioning two properties at different speeds but was informed you can't transition overflow. So now I'm just asking how to stop overflow auto from displaying the scroll bars during height transition. The original post is below.
I want to transition the height and width of a content box at 0.3s but want the overflow-y at 1s or delay then same. I'm mostly trying to make it so that when the transition takes place the scroll bars don't flash from there to not.
.barOpen {
-webkit-transition: height 0.3s ease-out
height: 225px
width: 98.5%
margin: 0.25%
padding: 0.5%
background-color: #28251f
color: white
opacity: 1
overflow-x: hidden
overflow-y: auto
float: left
}
.barClose {
-webkit-transition: height 0.3s ease-out
width: 100%
background-color: #d79e12
height: 0
overflow-x: hidden
overflow-y: hidden
float: left
}
Overflow is not animatable, but you can use container with overflow: hidden and apply transitions to that container.
.barContainer {
-webkit-transition: height 0.3s ease-out;
width: 100%;
overflow: hidden;
float: left;
}
.barContainerOpen {
background-color: #28251f;
height: 225px;
}
.barContainerClose {
background-color: #d79e12;
height: 225px;
}
.bar {
height: 225px;
width: 98.5%;
margin: 0.25%;
padding: 0.5%;
background-color: #28251f;
color: white;
opacity: 1;
overflow-x: hidden;
overflow-y: auto;
}
Simplified Jsfiddle
Related
this is my code:
.menu_item::after{
content: "";
display: block;
background-color: black !important;
width: 0px;
height: 2px;
transition: width 0.5s;
}
.menu_item:hover::after{
width: 100%;
}
.menu_item.active::after{
width: 100%;
}
It simply make a underline-like effect transition by make the width of the ::after content go from 0 to 100%, so indeed when the mouse leave the .menu_item the width go back from 100% to 0.
The problem is, the underline stay on 1px for some seconds after it goes back from 100% to 0px, and it's very unpleasant to see.
Is there something i can do or it's a thing i have to keep?
The problem appears under "Qualcosa su di me"
i just changed the color of the background-color of the .menu_item as the bg-color of the container, and added that to the transition:
.menu_item::after{
content: "";
display: block;
background-color: RGBA(190, 0, 40, 0);
width: 0px;
height: 2px;
transition: width 0.5s, background-color 0.7s;
}
.menu_item:hover::after{
background-color: black;
width: 100%;
}
.menu_item.active::after{
background-color: black;
width: 100%;
}
Doing so make it go "invisible" before displaying that 1px
This is my code:
<!DOCTYPE html>
<style>
a.nice-link {
position: relative;
color: #71ad37;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 200%;
height: 20%;
width: 0;
max-width: 200%;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
li {
display: inline-block;
}
.try{
width: 50px;
}
</style>
<div class = "try"><a class="nice-link" href=“http://katoliiklased.blogspot.com/2018/08/katekismuse-surmanuhtlust-kasitlev-uus.html“ data-text="Hello Bello Sello" target="_blank">Hello Bello Sello</a>
</div>
The point of the code is: if you hover your mouse over the link, it will put transition into work, so that the text will highlight from left to right.
It works OK if there is one line of text. But if there is more, the transition works only on the first line.
How to make it work on other lines also? Either so that 1) the transition begins with the first line and then continues for other lines or 2) the text will transition as whole, with all the lines at the same time from left to right
I appreciate your help!
Just remove the white-space: nowrap; in a.nice-link:after style.
Test it here.. https://jsfiddle.net/nimittshah/aqd6ev39/1/
I have bottom line, on the right side there are grey div, I want on hover to show up full that div. At the beginning grey div is hidden. How could I solve this problem? Thanks!
There is fiddle link
<body>
<div id="wrap">
</div>
<div id="footer">
<div class="container">
<div id="footer_right_wrapper"></div>
</div>
</div>
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -61px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
#footer {
height: 61px;
background-color: red;
color: black;
}
.container {
height: 61px;
overflow: hidden;
}
#footer_right_wrapper {
width: 100px;
height: 217px;
background-color: grey;
float: right;
}
Use :hover selector attribute:
show/hide grey element:
Fiddle: http://jsfiddle.net/or2y2fzg/
#footer_right_wrapper {
display: none;
}
#footer:hover #footer_right_wrapper {
display: block;
}
If I understood you correctly, you want to show the grey div once you hover your cursor over the #footer?
.
Expand grey element:
If you want to expand grey element to fill #footer element: http://jsfiddle.net/r30nxzxk/
#footer_right_wrapper {
width: 100px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#footer_right_wrapper:hover {
width: 100%;
}
Note that I added CSS transition to have a smooth UX.
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.
I have this functionality working completely in CSS, but I'm running into anomaly:
I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.
below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/
.day .sidebar{
width: 200px;
}
.day .sidebar ul {
list-style: none;
padding: 0;
margin:0;
position: absolute;
width: auto;
}
.day .sidebar ul li{
border-bottom: 1px solid #626666;
display: relative;
width: 200px;
}
.day .sidebar ul li:hover{
width: auto;
}
.day .sidebar ul li a{
font-weight: normal;
font-size: .8em;
color: #f2f2f2;
display: block;
width: auto;
padding: 4px 5px;
background: none;
width: 190px;
height: 10px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: background 1.3s ease-out;
-moz-transition: background 1.3s ease-out;
transition: background-color 1.3s ease-out;
}
.day .sidebar ul li a:hover {
background: #797979;
-webkit-transition: background 0.15s;
-moz-transition: background 0.15s;
transition: background 0.15s;
text-decoration: none;
width: auto;
-webkit-transition-property:width;
-webkit-transition-delay:1s;
position: relative;
}
You are overwriting your transitions between background and width, which is probably causing problems.
There is a way to set multiple transitions but I'm fairly sure this way will cause problems.
But
In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.
A solution for toggling between a specific width and auto:
The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:
$(".author").each(function() {
$(this).width( $(this).width() );
});
and then in css
.author:hover { width: 200px; !important }
EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?