Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transition on a background image

I want to do an CSS3 transform: rotate(360deg); in a transition 1s; on a background image instead of a seperate image(element).. Is this possible? I have searched the hell out of Google but no succes! What I am trying to achieve is something like:

#footerLogo { 
  background: url('ster.png'), 
  -moz-transition: -moz-transform 1s,
  transition: transform 1s,
  -o-transition: -o-transform 1s,
  -webkit-transition: -webkit-transform 1s;
  background-position: #outlinedtotheleft;
}
#footerLogo:hover {
  background: transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

I hope this is possible! I know it is easily doable in JS (jQuery) with:

$('#something').hover(function(){morecodehere});

...but I want to know if it is possible with only CSS(3)

HTML:

<div id="footerLogo">
  <img src="carenza.png"/>
</div>
like image 255
Dominique Avatar asked Sep 05 '11 13:09

Dominique


People also ask

What is css3 transition?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

How do you add an animation to an image in CSS?

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

What is transition property in CSS?

Definition and Usage. The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.


2 Answers

Sure you can, try something like this:

HTML

<div id="planet">
</div>

CSS

#planet { 
    width:200px;
    height:200px;
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}

#planet {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}

JSFiddle

like image 111
Andres Ilich Avatar answered Sep 29 '22 07:09

Andres Ilich


I don't think you can apply a transform to the background image itself (separately from the div.) However, you can rotate the whole div, including using a transition to animate it (here's a working example.)

It might help if you could describe the exact effect you want to achieve?

Code:

#footerlogo {
    width: 200px;
    height: 200px;
    background-image: url(http://lorempixum.com/200/200);
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
}

#footerlogo:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}
like image 31
Matt Gibson Avatar answered Sep 29 '22 07:09

Matt Gibson