I'm playing around with a CSS3 Gradient and trying to move it in on mouseover. As you can see from this jsFiddle, the CSS gradient appears on :hover; however, it seems to flickers a few times.
FYI, so far, this has been tested on Chrome v30 / Firefox v24 / Safari v5.1.
Separately, both have turned out to be working solutions, but combined, I get the flickering effect.
nav li {
width: 90px;
padding-right: 15px;
padding-left: 15px;
height: 30px;
border: 1px solid #000;
float: left;
list-style-type: none;
background-position: -200px -200px;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
}
nav li:hover {
background-position: 200px 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}
I've tried limiting the animation using animation-iteration-count, but as I've figured out, this only seems to work with animations and #keyframes. I've also read on a few different sites that
#keyframes don't yet support CSS Gradient animation.
The flickering effect is due to the difference between your element height (30px) and the offsets you've given for the background (-200px -> 0px).
Basically, it's scrolling past the view six times in the one second transition (because 30 goes into 200 six times), which is what is giving you the flickering effect. You can see the effect more easily if you increase the transition time a bit, say to 5 seconds; this will make it more obvious what it happening. (obviously you can set it back when you're done testing)
If you change the inital background-position to -30px instead of -200px, you'll get it scrolling into view just one time, and thus no flicker.
Hope that helps.
The problem is background-repeat. You must set it to no-repeat so that the background is not visible before hover
background-repeat: no-repeat;
JSFiddle
As mentioned in other answers, the problem is background-repeat and your very large background position.
Here is an updated Fiddle with what I believe you were trying to achieve.
Note that I have removed all of the redundant CSS rules - all major browsers now support gradients and transitons without prefix, making all those prefixes useless (it should also be noted that -ms-transition and -ms-linear-gradient have never existed, because IE didn't jump the gun... did you know there are at least THREE different ways to define gradients in Chrome?)
In addition to cleaning up, I moved the background definition to the element's styles (rather than its hover styles) to ensure that a "transition out" is possible, otherwise it just snaps to blank. I have applied background-repeat:repeat-x to only allow horizontal repeating, and adjusted the background-position so that in the initial state the gradient is just barely completely off the bottom, and the hover state is such that it is in the right place. This produces a smooth and exact transition.
Hope this helps!
Related
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I'm trying to create a transition on a gradient background of a <div>. I'm trying to do it this way because I'd like to implement two different styles on my site a light one and a darker one. After choosing the right color and implementing a way to change between the two themes I thought why not build a transition to smoothen the switch between themes.
I looked up a way to transition a gradient. I found this blog: Sapphion.com. It explains how to transition a gradient through the background-position.
After copying the code to a jsFiddle it sort of worked. It doesn't matter what I set on the background-position it always transitions to the full gradient from 0% to 100%. I want to transition it from 0% to 50% so that you only see 50% to 100% of the gradient. Does anyone know how to do this or did I miss something?
your mistake was to specify background-position: 100y; in the hover state.
It should have been (since you are moving the gradient in the vertical direction)
background-position-y: -100px;
full CSS:
#DemoGradient{
background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px; /* correct value if you want it to get at 50% */
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position-y: -100px;
}
updated demo
I have a background image in my css3 with image and gradient defined. I also want to have a transition when class changes from on_time -> too_late or vise versa.
I cannot get the transition on the gradient. Is this somehow supported in css3?
Thanks
div.too_late
{
color: White;
background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);
-webkit-transition-property: background-image, color;
-webkit-transition-duration: 5s;
}
div.on_time
{
color: #222;
background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);
-webkit-transition-property: background-image, color;
-webkit-transition-duration: 5s;
}
It's not possible to have transitions on background gradients. But you can have a look at this link to make it work with "hacks": http://nimbupani.com/some-css-transition-hacks.html
You can also make it appear like it's changing by using the background-position shift: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Here is a similar question with more links and information btw: Use CSS3 transitions with gradient backgrounds
"Gradients don't support transitions yet (although the spec says they
should). If you want a fade-in effect with a background gradient, you
have to set an opacity on the container and transition the opacity."
Source: Use CSS3 transitions with gradient backgrounds
The property background-image is not supported
http://www.w3.org/TR/css3-transitions/#animatable-css
I am trying to make a CSS3 button.
Problem: When I mouseover the button, a white thing appears from the bottom of the button. I narrow this problem down to the background-position: 0 -15px; CSS property, but how can I tweak it such that the gradient changes of mouseover but avoid the white thing from appearing? Thanks!
JSfiddle: http://jsfiddle.net/7LT35/
You have to change the background-size value!
Insert to .btn this:
background-size:1px 53px;
and adjust your gradient! Than it (hopefully) will work!
Here's a result: http://jsfiddle.net/7LT35/6/
But I think it's not the correct gradient!
The "white thing" is just the button's background colour.
The gradient image is the exact size of the button. So if you move it, of course it's not going to cover the button any more.
Personally, I would suggest just making a gradient image and doing what you want with that.
PS. Please don't use IE "hacks" and filter properties unless you actually test them to make sure they do what you intend them to do.
The white thing is your background gradient. You are telling the element to only move up 15px on hover.
You should also put the transition on the static class and not the hover psuedo element.
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
..more styles
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
}
This makes the white/grey gradient appear on hover. Not sure what you were wanting to do with the transitions.
Check out the fiddle
When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
See here
<button>Log In</button>
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
-webkit-transform: translate3D(0, 0, 0);
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
Similar Question here: Webkit support for gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
Still definitely a bug tho...
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}
There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s).
Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
I solved the blinking like this:
Html as follows:
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit