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;
}
Related
Consider the following output:
In the output, you can notice weird corners in the username input (extra white-colored edges.) But they do not appear in the password input.
What might be causing this? Is there any way in CSS to fix this weird behavior?
(Note: I use Chrome as my browser.)
I looked for solutions on Google, but did not find any. I would like the weird corners of the rounded border to not appear.
#input-box{
outline: none !important;
width: 60%;
height: 38px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #c1bdb8;
border-radius: 4px;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-moz-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-o-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
border-radius: 0 !important;
-webkit-appearance: none !important;
}
<input type="text" id="input-box" placeholder="Enter Something">
I am doing some basic CSS fill transitions on hover. I have used this codepen as an example: https://codepen.io/brandon4117/pen/ihIgE. Now on hover the background position raises to fill the div, and on hover off, the background goes back down. I wanted to know how can I modify this pen, to work such as when hover off the transition should go upwards, rather than down.
Most hover transitions: Hover on new fill top->bottom. Hover off new fill removes bottom->top. I would like to do on hover fill top->bottom, on hover off fill removes top->bottom again.
A look at the CSS being used:
div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
div:hover {color: white;
border-color: #A72424;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}
a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}
a:active {color: white;}
Thanks
Ok I got the answer: For top down do this:
.divclass::after {
position: absolute;
transition: 0.3s;
content: '';
height: 0;
top: 50%;
right: 0;
width: 3px;
background: #fff;
bottom: 0;
top: auto;
z-index: -1;
width: 120%;
}
.divclass:hover::after {
height: 100%;
top: 0;
}
Thanks for pointing me in the direction of pseudos Frderico
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/
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 have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps:
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
Put the transitions on a.squares not a.squares:hover
a.squares {
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
I went through this exact thing when I was just leaving about transitions :)