Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS transition with background gradient

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/

like image 970
Caio Tarifa Avatar asked Oct 17 '11 17:10

Caio Tarifa


People also ask

Can CSS animate gradient backgrounds?

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.

How do you add a transition to a gradient?

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.

How do you make a background image transition in HTML?

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.

How do you make a radial gradient in CSS?

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.


1 Answers

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

like image 62
locrizak Avatar answered Sep 18 '22 21:09

locrizak