I got this animation using keyframes that is not working in webkit or IE10 (doing those first). Am I doing something wrong?
Thanks for your suggestions guys!
I don't know about IE, but -webkit-animate isn't a valid property. You need to use -webkit-animation.
Demo: http://jsfiddle.net/pmfzh/2/
Hereb is the correct CSS. Change animate to animation
div.run:hover{
animation: bounce 2s;
-webkit-animation: bounce 2s;
}
Related
how to animate plus one div like this site...i just copy and paste css but nothing happend.
http://vbiran.ir
please help me to make somthing like this
my code is somthing like this googleplus{position:absolute;top:100px;right:310px;background:#F3EBDB;border:1px solid #C3B8A3;padding:14px 6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;animation:googleplus 2s infinite;-moz-animation:googleplus 2s infinite;-webkit-animation:googleplus 2s infinite;font-family:BKoodakBold !important}
That is made with CSS3 animations. You specify the name of the animation, then describe it with #keyframes property. See here for further details, and here is working example.
This effect works fine in FF but not Chrome- the Firebug results in Chrome show that the '-webkit-animation' aren't rendered in Chrome. In Firefox however, you see the'stretch' effect on entrance of the object. In Chrome, the object doesn't scale at all.
http://jsfiddle.net/AfDwu/5/
You are not specifying the properties of the -webkit-animation, only the name.
Replace:
-webkit-animation-name: ooze
With:
-webkit-animation: ooze 2s 2s ease-in-out;
And it will work
I'm trying to transition both the scale and the opacity using CSS3 transitions - I can't work out how to transition multiple things without using all
transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;
works, as does:
transition: all 1s ease-in;
and
transition-function: opacity;
or
transition-function: scale;
but not
transition-function: scale, opacity;
See the example here: http://jsfiddle.net/5PCGs/7/
Any help would be really appreciated! Thanks :) !
Edit:
I have worked out it's transition-property (thanks Simone), but now it's only animating opacity in Firefox, not both - http://jsfiddle.net/5PCGs/9 - compare this in FF and Chrome side-by-side
Thanks to Boris Zbarsky and Simone Vittori.
The answer was to use transition-property and in not specify all the things you're transforming in there, just put transform in as one of the values, and let the differences in the transforms between the classes take care of itself.
transition-property: transform,opacity;
transition-duration: 1s;
transition-timing-function: ease-in;
EDIT: Don't for get to add any prefixes you need to these. For Webkit browsers for example:
-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
Thanks again!
Try to use transition-property instead of transition-function, that actually doesn't exist. :)
Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined.
Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover
I can't seem to use keyframes properly, it never works and I have all the latest browsers.
Thanks.
If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/
If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/
Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.
Some Code, looks like webkit only at this point in time.
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Via: http://jsfiddle.net/hfXSs/
More here: http://css-tricks.com/parallax-background-css3/
If I use Nivo Slider on a page with a fullscreen background image, the slide transitions work slow and chopped in IE 7 and 8. In all other browsers, the transitions work smooth.
Here is a very basic example:
http://www.test-case.de/fullscreen-nivo/demo/demo.html
To ensure that the problem is not caused by any JS conflicts, I didn't use any JS for the fullscreen background. It's only a few lines of CSS.
Anybody an idea how to fix that?
Thanks a lot!
Karl
I've managed to partially fix it:
img.full-screen-image { -ms-interpolation-mode: nearest-neighbor; }
Not an ideal solution though.