http://jsfiddle.net/LJdAU/
-o-transition:color .3s ease-out, background .5s ease-in-out;
-ms-transition:color .3s ease-out, background .5s ease-in-out;
-moz-transition:color .3s ease-out, background .5s ease-in-out;
-webkit-transition:color .3s ease-out, background .5s ease-in-out;
transition:color .3s ease-out, background .5s ease-in-out;
I am trying to fade in and out a div object. See the fiddle. I made the fade especially long to see the problem.
The menu items (canada, germany, etc) on rollover works fine (that is fades in) , but on rollout it does not fade out.
can someone spot the error?
thanks!
LINES 40-47 css code is where the transition code it located :)
The reason your transition is cutting out like that is because you have the transition only on the :hover, what you've got to do is actually move that onto the selector you want to transition, so:
.collapsible, .page_collapsible {
margin: 0;
padding:8px;
height:20px;
border-top:#2b2b2b 1px solid;
border-left:#2b2b2b 1px solid;
border-right:#2b2b2b 1px solid;
border-bottom:#2b2b2b 0px solid;
background: black;
font-family: Lato;
text-decoration:none;
text-transform:uppercase;
color: #fff;
font-size:1em;
-o-transition:color .3s ease-out, background .5s ease-in-out;
-ms-transition:color .3s ease-out, background .5s ease-in-out;
-moz-transition:color .3s ease-out, background .5s ease-in-out;
-webkit-transition:color .3s ease-out, background .5s ease-in-out;
transition:color .3s ease-out, background .5s ease-in-out;
}
Here is the updated fiddle: http://jsfiddle.net/LJdAU/1/
Related
I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?
CODE:
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-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; }
#description a {
color:{color:text};
-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; }
#sidebar:hover #description {
opacity:0.6;
-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; }
Try this...
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-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;
}
#description a { color:{color:text}; }
#description:hover { opacity:0.6; }
Tried it itself in my code.
Just get rid off opacity and it will work.
See youtiming dot com for demo.
'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp
Here is a live example on fiddle I just made
This is the HTML Markup
<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>
This is the CSS
.kid {
max-width:250px;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
Fiddle here: https://jsfiddle.net/cdsaekv9/7/
On my site Im using a CSS3 hover fade for my submit button. It correctly fades on hover, but when I remove the curser from the button it quickly changes back to the original color, it doesn't seem to be doing the 1 second fade back out.
.form-wrapper input[type=submit] {background-color:#0076A9}
.form-wrapper input[type=submit]:hover{
background-color:#7daed3;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease}
UPDATE:
.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}
.social-links:hover {
color:#7daed3;}
You need to use ease-in-out. See: http://css3generator.com/
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
For the transition to effect ALL the properties, use (for social links):
.social-links a{
display: inline-block;
width: 43px;
height: 43px;
margin: 0 10px 10px 0;
color: #0076a9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Set the -webkit-transition-duration:1s; to the input without the hover in your css, like so:
.form-wrapper input[type=submit] {
background-color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
background-color:#7daed3;
}
Live example: http://jsfiddle.net/YgWYh/
I'm trying to get an image within a table cell to have a filter applied to it when you hover over the table cell. I'm not sure if there's a way to this with just CSS.
[EDIT]
table.flip td:hover {
background-color: #510000;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
table.flip td:hover img {
-webkit-filter: brightness(400%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
The above is working now other than the fact that mousing out doesn't apply the transition effect again. Mousing in has it fade in, but mousing out has it just blink back to the original state. The above code works on all other images I'm applying this filter to on the site (in terms of a transition in and out).
Is it because it's a table? The table is also within a frame, but the other filtered images are as well. Not sure why it won't transition back.
Regarding your transition question - have a look at:
http://learn.shayhowe.com/advanced-html-css/transitions-animations
The color transition works like a charm.
EDIT:
Ok now I see your problem:
The transition needs to bee applied to the element itself but not to the hover state.
table.flip td {
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover {
background-color: #510000;
}
table.flip td img {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover img {
-webkit-filter: brightness(400%);
}
Here is the fiddle:
http://jsfiddle.net/ULHb4/
I am having issues with my CSS3 transitions:
div.one_fifth{
border: 1px solid #48484A;
transition : border 400ms ease-out;
-webkit-transition : border 400ms ease-out;
-moz-transition : border 400ms ease-out;
-o-transition : border 400ms ease-out;
font-size: 18px;
transition : font 300ms ease-out;
-webkit-transition : font 300ms ease-out;
-moz-transition : font 300ms ease-out;
-o-transition : font 300ms ease-out;
}
div.one_fifth:hover{
border: 1px solid #ed2124;
font-size: 20px;
}
Now the problem is that when I define both the transitions, the border one does not work...So it seems like the two transitions interfere and the font one overrides the border one...How do I intergrate them, if so, how would you do it with different speeds(ms)?
You can specify 2 or more comma-separated transitions, using a single transition property:
JSFiddle Demo
div.one_fifth {
border: 1px solid #48484A;
font-size: 18px;
-webkit-transition : border 400ms ease-out, font 300ms ease-out;
-moz-transition : border 400ms ease-out, font 300ms ease-out;
-o-transition : border 400ms ease-out, font 300ms ease-out;
transition : border 400ms ease-out, font 300ms ease-out;
}
div.one_fifth:hover {
border: 1px solid #ed2124;
font-size: 20px;
}
If you were using the same timing and easing for both transitions, you could use transition: all;
jsFiddle
div.one_fifth {
border: 1px solid #48484A;
font-size: 18px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
div.one_fifth:hover {
border: 1px solid #ed2124;
font-size: 20px;
}
Here I have some CSS:
#image-edges-beneath:hover{
background-color: blue;
}
#image-edges:hover{
background-color: blue;
}
#image-edges-beneat:hover:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border: 2px solid #F1FD6D;
}
#image-edges:hover:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border: 2px solid #F1FD6D;
}
However this does not work. The only thing which happens is that the background color has a transition while I want it to only change on hover, while the border I want to have a transition, so basically the border fades into the color while the background color changes color immediately upon hover. That's what I want to accomplish, but this doesn't work. :(
Any ideas users?
What you need to do is set which property you want to transistion properly. Currently you have it as "all" but it needs to be either "background-color" or "border-color" based on which you want to be transitioned.
transition: border-color 1s ease;
http://jsfiddle.net/u3Ahk/
You can do border effect in a lots of way. Apply the below css to the class which you gonna apply border effect and change the border style on any event occurs.
-webkit-transition: border 3s ease;
-moz-transition: border 3s ease;
-o-transition: border 3s ease;
-ms-transition: border 3s ease;
transition: border 3s ease;
Also refer these links for advance border effects
https://codepen.io/giana/pen/yYBpVY
http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions