I am trying to create a nav menu like the one here(http://themes.fuelthemes.net/bouncy/) for practice, and I have come pretty close but mine doesn't quite look (the animation isn't as smooth) as good as the one in the example. The source code is very large and I cannot find how the author creates the animations in the css code or through javascript. Here is what I have so far. Could someone please take a look and tell me what I am doing wrong?
The method I am using to make the menu slide down is by using the max-height property and I am making it fade in with the opacity property.
Bulk of animation code:
.menu > li:hover > ul {
display: block;
-webkit-transition: max-height 0.2s, opacity 0.2s;
-moz-transition: max-height 0.2s, opacity 0.2s;
-ms-transition: max-height 0.2s, opacity 0.2s;
-o-transition: max-height 0.2s, opacity 0.2s;
transition: max-height 0.2s, opacity 0.4s;
max-height: 500px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.dropdown {
max-height: 0;
position: absolute;
list-style: none;
background: #2c2c2c;
margin: 0;
padding: 0;
overflow: hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
My JSFiddle:
http://jsfiddle.net/cn2fZ/
They aren't using Transistions what the code is is something like this
http://jsbin.com/onituc/1/
or
this http://jsbin.com/onituc/2/edit
Both are different styles
The first one uses the mouseenter and mouseleave functions combined with the delay function. As well as using the fadeIn, we can change the fadeIn to other stuff like
show
slideDown
The second one just uses the slideUp and slideDown functions combined as well with the mouseenter mouseleave
Hope one of these two help you, if you need more help please comment
Related
I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...
The CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Take a look: http://jsfiddle.net/AK3La/
You can transition background-image. Use the CSS below on the img element:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.
The solution (that I found by myself) is a ninja trick, I can offer you two ways:
first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:
<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>
with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)
CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)
Basically, you need to hide "normal" state and show their "hover" when you hover it
and that's it, I hope somebody find it useful.
Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.
You may want to do some tricks with background-position.
I've figured out a solution that worked for me...
If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:
<li id="facebook"></li>
Make the "li"s background your button image
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Now all you need is "opacity" under "a:hover" and set this to 1.
#facebook a:hover {
opacity:1;
}
Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
If I explained it correctly that should let you have a fading background image button, hope it helps at least!
You can use pseudo element to get the effect you want like I did in that Fiddle.
CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{
opacity: 1;
}
HTML:
<div class="title">
HYPERLINK
</div>
If you can use jQuery, you can try BgSwitcher plugin to switch the background-image with effects, it's very easy to use.
For example :
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
And add your own effect, see adding an effect types
Try this, will make the background animated worked on web but hybrid mobile app
not working
#-webkit-keyframes breath {
0% { background-size: 110% auto; }
50% { background-size: 140% auto; }
100% { background-size: 110% auto; }
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}
Considering background-images can't be animated,
I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after. They are at different z-index layers. The one that is ahead starts with opacity 0 and becomes visible with hover.
You can use it the same approach for creating animations with linear-gradients too.
scss
#mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
Now you can simply use it with
#include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
You can check it out here:
https://jsfiddle.net/pablosgpacheco/01rmg0qL/
If animating opacity is not an option, you can also animate background-size.
For example, I used this CSS to set a backgound-image with a delay.
.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}
Salam, this answer works only in Chrome, cause IE and FF support color transition.
There is no need to make your HTML elements opacity:0, cause some times they contain text, and no need to double your elements!.
The question with link to an example in jsfiddle needed a small change, that is to put an empty image in .title a like background:url(link to an empty image); same as you put it in .title a:hover but make it empty image, and the code will work.
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{ background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
Check this out https://jsfiddle.net/Tobasi/vv8q9hum/
With Chris's inspiring post here:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
I managed to come up with this:
#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
#include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
#include transition(background-image 0.5s ease-in-out);
}
}
This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer: https://stackoverflow.com/a/19818268/2602816
I was struggling with this for a bit, I first used a stack of images on top of each other and every three seconds, I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack. At the same time I was using animations as shown above. I couldn't get it to work for the life of me.
You can use this library which allows for **dynamically-resized, slideshow-capable background image ** using jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from.
Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/
Here's the CSS code in case you see something wrong immediately:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
}
.toggleable {
transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
I'm using a checkbox-label combination to trigger the opening and closing of the menu.
The first thing you need to understand is that the visibility property in CSS cannot be animated. This is due to it only having two states (either visible or hidden, nothing in between to facilitate the animation).
If you want to make a fade-in effect, you can use opacity:0; to opacity:1; and give that a transition instead.
The next thing to note is that your animation time is very long, and if you are animating a max-width, you need to shorten the animation time to adjust.
See fiddle : https://jsfiddle.net/m9pd8bjh/12/
And CSS:
.toggleable {
transition: max-height 0.25s ease-in-out;
}
If you specifically want that long animation timeframe, then you will have to use something other than a max-height solution.
This would then become a new avenue to approach as you would have to use JavaScript, jQuery or some other such framework.
For future reference, here is a fiddle doing the same using jQuery: https://jsfiddle.net/m9pd8bjh/15/
And here is the jQuery code:
$('.toggler').click(function(){
$('.hide').slideToggle();
});
I add another transition when you close the menu and I removed the initial margin of the ul element. Is that effect ok for you ?
CSS code changed
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#menu-main { margin: 0; padding: 10px 40px }
input[type=checkbox]:checked ~ .toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
See this fiddle
I am trying to set the transition for the portfolio section of my web, I need the effects on hover for portfolio thumbs and i have the following codes in CSS:
.proimg img {
height: 100%;
max-width: 100%;
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
That's the portfolio page http://goo.gl/Gaja7v
On hover, images didn't look good. Transition works but it messed up the thumbs, doesn't look good. I would like to make the transition to similar as this website http://goo.gl/0hb56Z
Anyone can help?
First of all, you have to resize list images for that!
--
I recommend jQuery, fadeTo function
//you have to include jquery lib
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
//HTML :
<img src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
//Javascript :
<script>
$('img').mouseenter(function() {
$(this).fadeTo('fast', 0.7);
}).mouseleave(function(){
$(this).fadeTo('fast', 1);
});
</script>
you can get more information about fade to function
- http://www.w3schools.com/jquery/eff_fadeto.asp
If you don't want to use fadeTo function.
//CSS
.fadeeffect {
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
}
//Javascript
$(document).ready(function() {
$('img').mouseenter(function() {
$(this).css('opacity', 0.7);
}).mouseleave(function(){
$(this).css('opacity', 1);
});
});
//HTML
<img class="fadeeffect" id="a" src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
It's easy to think of the transition property as an "action": eg, "When this :hover state begins, transition the given properties." But you really need to think of it as a constant state, which means "when the following properties change, for any reason, transition them in this manner."
So you really want the transition property to be on your first CSS rule, so that it always applies. Otherwise, the transition is only when the mouse starts to hover, not when it leaves.
You need to set the transition property to your img as well:
.proimg img {
height: 100%;
max-width: 100%;
transition: all 0.55s ease-in-out; /* this line */
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
http://codepen.io/anon/pen/ZbPKVR
This is explained by Katana314's answer.
In this example version of my code if you hover over one of the non-faded faces some text appears over it for the duration of the transition and then disappears. If you do the same thing over one of the faded faces the text appears over it for the duration of the transition and then seems to jump to behind everything.
https://www.youtube.com/watch?v=Dx2d2G9pXb8
I have tried altering the z-index of all the elements involved but it seems to have no effect. How do I make it fade from invisible to visible, and then stay there?
This is a cut down version of the important scss
.value-tweet-container {
z-index: 2000;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
opacity: 0;
&:hover{
opacity: 1;
}
}
To get the overlay to stay, add position: absolute and top: 0 / left: 0.
Like this:
.value-tweet-container {
position: absolute;
box-sizing: border-box; /* Remove if you don't want to cover the entire tile */
top: 0;
left: 0;
height: 100%; /* Remove if you don't want to cover the entire tile */
width: 100%; /* Remove if you don't want to cover the entire tile */
}
Here is your new pen.
The border-box helps as it adds the padding into the height and width percentage calculation and I removed the 3px margin.
If you don't want the tile to be covered by the overlay, remove the lines where indicated.
I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.
Current attempt: JsFiddle
Why doesn't this work? What am I doing wrong?
Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.
Using width and opacity seems to produce a reasonable effect.
you can use opacity only, visibility:hidden or display:none; are not suppose to allow focus (IMHO), since element are not visible.
form label {
font-size: 23px;
}
#box {
width: 0px;
opacity:0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:focus {
opacity:1;
width: 50px;
}
http://jsfiddle.net/6h8cF/7/
You can't really get a focus from a label since it is not a focussable element.
See BoltClocks answer here : Anyway to have a label respond to :focus CSS
Fiddle:
http://jsfiddle.net/h6NNs/
Change from :focus to :hover.
Resulting CSS should be:
form label {
font-size: 23px;
}
#box {
width: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:hover{
visibility: visible;
opacity: 1;
width: 50px;
}