I've added tabs to my site using CSS and according to this demo:
http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/index4.html
However, chrome and firefox behave differently in regards to the animation.
Once you revisit a tab, firefox doesn't play the Fade-In animation again - chrome does.
How can I tell firefox to play the animation again?
JSFIDDLE: http://jsfiddle.net/h5W33/
important part:
.tabs label {
display: block;
padding: 10px 20px;
cursor: pointer;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
display: block;
}
Related
I am using Montana template on Wordpress and I have no idea why my dropdown menu is hide behind the main slider...
Here is the link of the test environment: http://evolutionescaperooms.com/dev/
Even if I put ul tag to z-index : 99999 or position : absolute, still doesn't work... But if you close and reopen the menu, the dropdown will be above the slider, without any reason...
Anyone got a quick fix please?
Thanks
This is an overflow issue not a z-index issue. The .navigation div has overflow: hidden; in its css. This is cropping any child elements that overflow its boundaries.
When you open and close the navigation it toggles the overflow to overflow: initial via Javascript. Hence why it only works after the menu is opened and closed.
Original CSS:
.navigation {
position: relative;
display: table;
overflow: hidden; /* Preventing overflowing popup menu from showing */
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
Update to:
.navigation {
position: relative;
display: table;
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
Css Transition effects on my website don't work in safari (tested on latest version). And transition is working well in others browser tested in Chrome, firefox, and Opera.
My code is the following:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-inverse ul a::before{
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
How to fix it? After that transition works in safari too.
The problem is that you placed the transition property for the element with the pseudo element before. Try placing the transition property for the element itself. This is what I mean:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color,top 0.5s;
-o-transition: color,top 0.5s;
-moz-transition: color,top 0.5s;
transition: color,top 0.5s;
}
I was wondering why my CSS transition effect looks great in Firefox and very "jumpy" in IE and Chrome. I'working on this one all day now and I can't see why this is happening. I tried backface-visibillity but that also doesn't work. I'm completly stuck on this one...
What I have is this:
<div class="stickyWrap">
<div id="header">content</div>
<div id="nav">content</div>
</div>
CSS:
#header{
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
padding: 20px 0;
}
.stickyWrap.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.stickyWrap.sticky #header {
padding: 5px 0;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
The best way to explain is to open this test site in FF, Chrome and/or IE.
Can anybody see what I'm doing wrong? Is it about the stickyWrap div?
If you are looking to simulate the smoothness of native app animation you can still trick the browser into enabling GPU rendering. Just add this CSS line of code
.myAnimatingClass{
transform: translate3d(0,0,0);
}
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/
Good Day
I am using the CSS transition effect on a hover selector, but the 2nd part of the transition is not smooth - When I hover over the element, it moves smoothly. When I exit hover, the element drops back non-elegantly (not smooth/timed). How do I fix it?
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
}
#login:hover {
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
NOTE: look at my JSFIDDLE to see what I mean
As soon as you leave the div the :hover pseudo class is no longer satisfied. Thus the div loses the transition properties.
Simply move the transition block from #login:hover to #login and you are done.
You have to define also transition to normal state.
Edit: Like Raffael said it is only necessary to define transition effect in normal state
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login:hover {
margin-top: 0px;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
DEMO