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/
Related
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 am creating a monotone Wordpress blog where images and iframes (Youtube) change from monotone to colour on hover.
http://amitoooldforclubbing.co.uk/
I've had no problem for the images:
img {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
This works fine.
However when I try to do the same for iframes, it doesn't work. Changing it to greyscale does - but the hover effect does not work.
Any idea?
iframe {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
iframe:hover {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Thanks
James
You simply forgot to set the hover filter grayscale on the iframe back to 0: -webkit-filter: grayscale(0%);. Tested it out on your site and it works now. However you might want to add a class that sets the grayscale to 0 on click as well since you lose the iframe color while the video is playing on hover out. Also, just in case you might not know -webkit-filter is only used by some modern browsers: http://caniuse.com/#feat=css-filters
I would create another empty div inside your iframe, color it grey with opacity and position it absolute top bottom left and right 0, so it's the same size as your iframe. Then, use javascript to change the div on mouseenter and mouseleave to display none, display block respectivly. Yes, it required another DOM element, but it's more widely supported than grayscale()
so something like this:
note: if the div makes the video too hard to see you can do the same thing, with jquery, just replace display: none, and dipslay: block with your greyscale() and axe the extra div tag
HTML
<iframe>
<div>
</div>
</iframe>
CSS
iframe{
position: relative; //this is important so the position absolute references the iframe
}
div{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
Jquery
document.ready(function(){
$('iframe').mouseenter(function(){
$('div').css('display', 'none');
});
$('iframe').mouseleave(function(){
$('div').css('display', 'block');
});
});
here's the documentation for mouseenter and mouseleave
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've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.
Here's the relevant CSS:
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
-webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
display: block;
opacity: 1;
transition: opacity 0.4s ease-out, display 0.4s step-start;
-ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
-moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
-webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}
The JavaScript to trigger the change is:
document.getElementById('myelem').className = "show";
But the transition doesn't seem to be happening - it's just jumping from one state to the other.
What am I doing wrong?
It does work when you remove the display properties.
#myelem {
opacity: 0;
transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
opacity: 1;
transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
}
JSFiddle.
The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.
You cannot use the display property for transitioning between states.
The answer provided by #MarcoK including the comments shows already the right direction. Setting display property hinders transition.
A better practice is though to put the unprefixed (standards) version after the browser-vendor prefixed ones, in order to be future-proof. The latter properties overwrite the former.
Other improvements:
As #Charmander pointed out, -ms-transition isn't supported by any Internet Explorer
There's also Opera's vendor prefixed -o-transition for Op 10.5-12 & Op Mobile 10-12, which currently is probably supported by less than .1% of global browser. I'll put it in for completion
CSS:
#myelem {
opacity: 0;
-webkit-transition: opacity .4s ease-in;
-moz-transition: opacity .4s ease-in;
-o-transition: opacity .4s ease-in;
transition: opacity .4s ease-in;
}
#myelem.show {
opacity: 1;
-webkit-transition: opacity .4s ease-out;
-moz-transition: opacity .4s ease-out;
-o-transition: opacity .4s ease-out;
transition: opacity .4s ease-out;
}
It is possible to animate show and hide elements in css, just instead of:
display: none;
/* and */
display: block;
use:
overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;
Since you replace this properties, you are able to animate any css value with transition.
working example:
https://jsfiddle.net/utyja8qx/