I would like to have a menu that slides in from the left and then vertically slides open, and closes by reversing those steps, sliding closed and then sliding away to the left.
I'm trying to use css transitions for this. I can get the menu to appear with a two step transition, but reversing doesn't work. According to other questions, reversing the steps should work, but for my specific case it does not. What is happening here?
Css
.menu-slide {
position: absolute;
width: 220px;
top: 90px;
color: #fff;
background: rgba(0, 0, 0, 0.60);
overflow: hidden;
}
.open {
transition: left 1s, max-height 1.5s 1s;
left: 55px !important;
opacity: .80;
max-height: 600px !important;
}
.closed {
transition: max-height 1.5s, left 1s 1s;
left: -255px !important;
opacity: 0;
max-height: 20px !important;
}
Fiddle
The problem is you have set opacity: 0; on .closed set it to .80:
.closed {
transition: max-height 1.5s, left 1s 1s;
left: -255px !important;
opacity: .80;
max-height: 20px !important;
}
Your fiddle updated.
Related
I have a bouncing down-arrow and want to hide it when I reach the footer after scrolling down, and show it again when I scroll back to the top. How can I do that without any JavaScript?
.bounce {
position: fixed;
left: 95%;
bottom: 0;
margin-top: -25px;
margin-left: -25px;
height: 50px;
width: 50px;
background: #65C178;
background-size: contain;
opacity: 0.8;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
-webkit-animation: bounce 1s infinite;
-webkit-overflow-scrolling: touch -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
-o-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;
overflow: hidden
}
#-webkit-keyframes bounce {
0% {
bottom: 5px;
}
25%, 75% {
bottom: 15px;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
<div class="bounce"></div>
as far as i know there is no css-only solution. you'll need javascript to determine the scroll position. The only CSSonly way i could think of, is to put the footer in front of the arrow (with z-index). so it gets hidden behind it.
I'm working on this website template and I keep running into issues. My biggest one right now is that when the fixed header goes over the content boxes, the semi-transparent boxes overlap the header until the user hovers over the box and causes it to return to an opacity of 1. I'm not sure why it does this and I'm really desperate to get this fixed. Any help is appreciated.
Here's a snippet relating to my content boxes:
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
opacity: 0.5;
}
#wrapper:hover {
width: 960px;
margin: 0 auto;
text-align: left;
opacity: 1;
}
And here's the full fiddle: http://jsfiddle.net/rkgy5zvz/
#nav {
position: fixed;
background-color: #222;
opacity: 1;
width: 100%;
top: 0;
z-index: 99999;
}
Just add the z-index property with the proper number. Here the JSfiddle
Is it possible to choose a different timing/speed for transition in css so when mouse hover over a div it expands with different speed than the speed it retracts back to its original width not hover state.
I have tried declaring different transition speeds in :hoer and normal state styling, however, only normal state style seems to apply.
http://jsfiddle.net/tpf8mv51/3/
Problems:
1st) it goes with same speed it expanded with.
2nd) zindex takes effect after animation is completed for reasons i don't gte.
3rd) other images get affected even though they shouldn't, by affected i mean they 99% of time disappear till animation is done.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.main {
font-size: 0;
height: 100%;
width: 100%;
display: none;
z-index: -1;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.main img {
-webkit-user-select: none;
width: 25%;
-webkit-transition: transform .5s;
transform-origin: left;
z-index: 0;
vertical-align: top;
}
.main img:hover {
transform: scale(1.3, 1);
z-index: 1;
}
Don't fret. try this (quick IN, slow OUT):
.main img {
width: 25%;
height: 100%;
transition: width 2s ease;
}
.main img:hover {
width: 50%;
transition: width .5s ease;
}
Your Fiddle as I can see it only has one transition. If you're only changing the width, tell it to change the width, which has full browser support, rather than calling transform with all the attendant prefixes.
CSS doesn't distinguish between mouseover and mouseout, but this thread seems like it may have the answer to your question:
MouseOver and MouseOut In CSS
Edit: I just realized you said you have tried this. Javascript may be your only option.
Update your css with the below (add transition)
.main img {
-webkit-user-select: none;
width: 25%;
-webkit-transition: transform .5s;
transform-origin: left;
z-index: 0;
vertical-align: top;
transition:all 1s;
}
.main img:hover {
transform: scale(1.3, 1);
z-index: 1;
transition:all 1s;
}
I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.
code:http://jsfiddle.net/3VHvM/
my html code:
<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/>
<div class = "img-overlay">
<h3>Typography</h3></div>
</div>
my css code:
.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}
.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}
.bucket img {
width: 100%;
}
Thank you for your help
1/20th of a second is too fast to see the effect. Try 2s instead.
http://jsfiddle.net/3VHvM/1/
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
}
it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s.
this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast.
here:
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
your code is correct. Just the time is too less. try 0.5 sec. you will see the output.
The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.
I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.
HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
#-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
I'm not sure what's going wrong. It looks like that as soon as I hover, it moves, but if I move the cursor one more pixel, it has to do a new calculation which causes the flickering.
I don't know why you need animations for this when you can simply achieve the above using transitions
The trick is to move the child element on parent hover
Demo
div {
margin: 100px;
position: relative;
border: 1px solid #aaa;
height: 30px;
}
div span {
position: absolute;
left: 0;
width: 100px;
background: #fff;
top: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div span:nth-of-type(1) {
/* Just to be sure the element stays above the
content to be revealed */
z-index: 1;
}
div:hover span:nth-of-type(1) { /* Move span on parent hover */
top: -40px;
}
Explanation: Firstly we wrap span's inside a div element which is position: relative;
and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.
Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.