I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?
HTML:
<div id="test">
</div>
CSS:
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
http://jsfiddle.net/LLRfN/
Animating backgrounds with CSS can be a great way to grab a user's attention or bring a design to be more modern. We can acheive this by using a combination of linear-gradient CSS function and @keyframes . The basic idea is that we have a huge background with 4 colours that transition to create the gradient background.
The secret is to lay a new element on top of the original element, with opacity of the new element set to 0. Then upon hovering, transition the new element opacity to 1. This way you can have the gradient on the invisible element, and it will “magically” appear when hovered over.
For the transition background image, we use the transition property in CSS and add a transition to the background image in the style tag. transition: background-image 3s; In the script section, we create an image object and add the source of the image that needs to be transitioned.
To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used.
This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:
Here is a generator
Here is an explanation
edit
Sorry I didn't realize there was a transition
property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.
Here is a good article on how to get it to work with a little bit of a hack
http://nimbupani.com/some-css-transition-hacks.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With