I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.
The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css?
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray alpha(opacity=50); /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.
In the meantime you could do this using SVG animation but not via CSS only.
Related
I have a class with following properties
The transition is working fine in Chrome and in Internet Explorer but in Firefox its not working. Someone please tell me how to make it work in Mozilla Firefox also.
background-color: #fafafa;
width: 100%;
max-height:55px;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
z-index:9999;
You should specify good transition rules and the default rule like this :
-webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
I'd like to embed images that are blurred by default using CSS (source image files are not blurred ofc). When the user hovers over an image it should be revealed. It would be awesome if it would have an animation on it as well. Is there any way to do this?
CSS filters (MDN Reference) can do this
img {
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transition: -webkit-filter .5s linear;
transition: -webkit-filter .5s linear;
transition: filter .5s linear;
transition: filter .5s linear, -webkit-filter .5s linear;
}
img:hover {
-webkit-filter: blur(0);
filter: blur(0)
}
<img src="http://www.fillmurray.com/460/300" alt="" />
in a part of my code I have CSS3 animation and it seems does not work very well on safari, but it's fine on other browsers, so, I would like to make and exception, and if the browser is safari then it ignores the animation part of the code.
Here is my code:
download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
transition: opacity .45s ease-in-out;
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out; /* EXCEPTION FOR HERE */
-o-transition: opacity .45s ease-in-out;
}
.download-music:hover {-webkit-opacity:1 !important; -o-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
Selector hacks
1.
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {}
html[xmlns*=""]:root .selector {}
2.
/* Safari 6- and Chrome 24- */
::made-up-pseudo-element, .selector {}
3.
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}
Media query hacks
/* Safari 3+, Chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hacks
1.
/* Safari 5- */
var isSafari = /a/.__proto__=='//';
2.
/* Safari */
var isSafari = /Constructor/.test(window.HTMLElement);
Source: http://browserhacks.com/
Ditch the prefixed opacity, it's been a couple of years since all browsers have supported it. It interferes with your transition declarations. This should work fine in all browsers.
.download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out;
-o-transition: opacity .45s ease-in-out;
transition: opacity .45s ease-in-out;
}
.download-music:hover {
opacity:1;
filter:alpha(opacity=100);
}
I'm working on a webpage where if you hover over an image, it'll desaturate. It works in Chrome and IE. However, I can't get the transition to work in FF and it doesn't desaturate at all in Opera.
Here's my code:
<!DOCTYPE html>
<head>
<style type="text/css">
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
filter: gray; /* IE */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Webkit */}
img {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
filter: none;
filter: grayscale(0);}
img.transition {
-moz-transition: all 0.5s ease-in-out; /* FF */
-o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
-webkit-transition: all 0.5s ease-in-out; /* Webkit */
transition: all 0.5s ease-in-out;}
</style>
</head>
<html>
<body>
<img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>
I've seen similar questions but I'm kind of a beginner, so the answers were a little abstract; you don't have to provide me with the code yourself, but point me to a somewhat detailed answer that I can understand. If anyone could help me out, that would be great.
Why wouldn't you use a simple color transition from red to grey?
Is there a way to make a button's background color fade from grey to blue then back to gray using only css3? A good example is a default action button is cocoa? I know this can be done in javascript but I'd rather only use css for this.
Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-
HTML
<input type="submit" value="submit" class="button" />
CSS
.button {
width:100px;
height:20px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}
#-moz-keyframes myfirst /* Firefox */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
see the demo:- http://jsbin.com/osohak/7/edit
read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/
If you need fade animation on hover or such things, CSS3 transition property is your solution.
EDIT:
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}