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;
}
Related
I have made bootstrap accordion for my website. Everything works perfect except in Safari.
I'm trying to figure out what's wrong.
If you are running Safari you can see the problem here
Also, the small piece of css code that I added to this accordion is:
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
The problem wasn't in above code because I tested accordion without it and still I had the same problem in Safari.
Any kind of help will be appreciated.
.collapse {
-webkit-transition: height 0s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
Why this doesn't work only on IE11? In FF and Chrome it is fine
.js-search-item {
width: 30px;
padding: 0px;
margin: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
http://jsfiddle.net/tkyzv3na/3/
You need to update your jQuery version. Problem has nothing to do with the code you're showing. transition works fine in IE10+. You don't need -ms-transition ever.
jQuery#1.10.0 doesn't appear to work in IE11 within JSFiddle. Bumped to jQuery#1.11.0: http://jsfiddle.net/tkyzv3na/3/
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;
}
Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.
i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant
Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:
#myLink {
opacity: 0;
}
#myLink:hover {
opacity: 1;
-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;
}
And here's a jsFiddle to demonstrate: Fiddle
Yes, just set the transition on the :hover rather than the link - http://jsfiddle.net/spacebeers/X4ZqE/
(in the Fiddle, the link is in the top left of the "result" box)
#main-menu li a {
opacity: 0;
}
#main-menu li a:hover{
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}
How can I apply transition only on the links which have images instead of text. For example only in the second link:
no image
<img src="http://i.qkme.me/35rb4r.jpg">
The following CSS will apply transition on all links:
a{
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
a:hover{
opacity:0.1;
}
I've tried this and doesnt work.
a:hover img{
opacity:0.1;
}
Here's jsfiddle: http://jsfiddle.net/wg5b3/
a > img:hover{
opacity:0.1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
You cannot select a parent element via css. But you really can style the image directly, i.e.
a > img {transition: opacity 0.5s;}
a > img:hover {opacity 0.1;}
a img:hover {
opacity:0.1;
}
You may try this as well:
a{
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
a:hover #hello{
opacity:0.1;
}
no image