I am making an HTML Application (hta) on windows. I went to make a linear gradient background transition, when I realized that gradients don't have any transitions, but I decided that I would put my mind to it and do it anyway. I had made a simple animation, but when I opened the app, it worked! I have to say IE has the transition I want for linear gradients. This is what I want my background to be:
body {
animation: animat 2s infinite linear;
}
#keyframes animat {
0% {background-image: linear-gradient(to right, lightgreen, lightblue);}
50% {background-image: linear-gradient(to right, lightblue, lightgreen);}
100% {background-image: linear-gradient(to right, lightgreen, lightblue);}
}
Anyway, that gives this cool effect in IE, where it is soothing, but you can't tell the background is necessarily moving. I would appreciate it if someone could open this page in IE and let me know how to do it without background-position. Thanks, I really appreciate it.
I have a list of elements that each have a linear gradient which gets animated after they load. The CSS looks like this.
li {
background: linear-gradient(to right, red 10%, white 10%);
background-size: 200% 100%;
background-position:right bottom;
-webkit-animation:colorChange;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes colorChange {
from {background-position:right bottom;}
to {background-position:left bottom;}
}
That works fine, but what I'd like to do is change the percentages per element. I tried taking out the background property and setting it as a style attribute on the element, but the animation went away in that case (it just loaded with the color already partially filled).
I am a CSS super noob so I'm probably doing something stupid. Help?
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!
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 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