I'm Aza Raskin @aza. I make shiny things. I simplify.

I'm VP at Jawbone, focusing on health.

 

Animation with CSS Transitions Made Easy

There are currently two proposed additions to CSS to make animating easier and with better performance: CSS Transitions and CSS Animations. Both are unfortunately named. The later is complicated, overkill, and probably won’t be supported by non-Webkit browsers, which leaves CSS Transitions as becoming the de-facto way to natively animate on the Web. Besides reducing power-hungry Javascript-based animation, the declarative CSS Transitions opens the door for hardware acceleration and commercial quality games. iOS devices and Safari already do so for buttery smooth results, and hardware acceleration just might make it into Firefox 4.

How Do CSS Transitions Work?

Normally, when you change the value of a CSS property, it changes instantly. With CSS Transitions, they automagically animate over time. Imagine you want to have a rollover indication for links where, on hover, the link changes its background color and jigs up a bit. With CSS Transitions instead of having the effect happen instantly, it can smoothly animated. Here’s how you’d do it.

You’ll have to use the -moz and -webkit prefixes for these properties until the CSS transitions specification is finalized.


a{
  transition-property: all;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
  position: relative;
  background-color: white;
  color: black;
}

a:hover{
  top: -2px
  background-color: black;
  color: white;
}

You can even add an event listener to detect when the transition has finished:


aLink.addEventListener("transitionend", function(){
  console.log("Transition Done!");
}, true);

Timing functions are defined by the control points for a cubic bezier curve of the form cubic-bezier(x1,y1,x2,y2). You can see some of the named timing functions and their values below. You can also define your own timing functions:


/* A more pronounced ease-in-out timing function. */
transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1.0);

/* A timing function which causes a little bounce.
   Note that values above 1 only work in Firefox. */
transition-timing-function: cubic-bezier(0, 0.35, .5, 1.3);


Using CSS Transitions with jQuery

To use CSS Transitions in practice, you’ll want some helper functions to handle setting and and unsetting the transition properties, handling completion callback, and stopping animations. Towards that end, I’ve written a quick jQuery plugin that allows you to do just that (as well as deals with an annoying Firefox bug.)

Using it is simple:

Some of the work that’s come before has assumed that you need to wait for the CSS transition properties to get applied before setting the properties to be animated. This is not the case.


// Makes all paragraph elements grow a border and then atrophy away.
$("p").animateWithCSS(
  {border: "5px solid #555"}, // CSS properties to animate
  1000,                       // Duration in ms
  "cubic-bezier",             // The timing function
  function(){                 // Callback
    $("p").animateWithCSS({border: "0px"}, 350);
  }
);

Get the CSS Transitions jQuery Plugin.

Demo

You’ll need a Webkit-based browser or a Firefox alpha to try this out.

Get the CSS Transitions jQuery Plugin.

Problems with CSS Transitions

Better timing functions. While using a cubic bezier curve is clever—it packs a lot of variation into just four numbers—it isn’t enough. While I was able to create a basic bounce animation, not only does the spec explicitly disallow it, but I can’t control even the basic parameters of the bounce (like how fast it returns). As John Resig mentioned in a blog post, it would be nice to supply a custom Javascript timing function (although this might break the ability to do hardware acceleration). A more CSS-like solution might be to allow authors to provide an arbitrary number of control points for a series of linked quadratic or cubic bezier curves (and to not restrict the y-axis points to the 0 to 1 range). That would enable fine-grained control of timing without requiring Javascript.

Ability to layer two animations on top of each other. If I’ve started an animation moving an element to the left, and half-way through want to start animating its opacity at a different rate, things get complicated very quickly. And by complicated, I mean impossible.

Ability to register an on step handler. We can currently register a “transitionend” event handler. I’d like to be able to do the same for “transitionstep”. This would make CSS Transitions potentially much more versatile—and allow frameworks to keep innovating on top of the transitions base instead of reverting to pure Javascript animation.

RT @aza Animation with CSS Transitions Made Easy | Follow @aza on Twitter | All blog posts

View all 136 comments


You forgot Opera transitions, “-o-”.



ralpht

I find myself doing things like this:

elem = document.createElement(‘div’);
elem.style.opacity = 0;
document.appendChild(elem);
setTimeout(function() {
elem.style.transitionProperty=’opacity’;
elem.style.transitionDuration=’330ms’;
elem.style.opacity = 1;
}, 0);

when I want to do:

elem = document.createElement(‘div’);
elem.style.opacity = 0;
document.appendChild(elem);
elem.style.transitionProperty=’opacity’;
elem.style.transitionDuration=’330ms’;
elem.style.opacity = 1;

Is there a way to force changes made to style via JS to be committed for the purposes of animations without yielding?


I wonder: How would a CSS-Based Game look like?

And thanks for the article!


How do we make sure that people won’t overuse these animation techniques? I prefer not to see websites designed with powerpoint-style effects for each page load, and don’t wish to have a browser extension to block such eyecandy effects.

Geocities had enough of these stuff.



Robert O'Callahan

There is no chance transitions on CSS tranforms will be hardware accelerated for Firefox 4, sorry.

Transitions on opacity should be accelerated to a great extent, though.


    If memory serves, CSS transitions (not transforms) will be hardware accelerated for at least Canvas elements in Firefox 4.


I agree with you entirely on the need for better timing functions. I don’t think I’d want to go as far as a custom JS timing function, as that doesn’t seem significantly less complex than using JS to string together multiple separate transitions for the same effect. I would like more than just two bezier control points which are limited to the range 0 to 1:

http://www.peppertop.com/blog/?p=862

Without the ability to easily specify curves which bounce, overshoot, and perhaps are even discontinous, the web will still lag behind the sort of transitions that people are increasingly used to seeing on their mobile phones.



Jeffrey Gilbert

Demo doesn’t animate on Firefox 3.6.3 on PC



Jeffrey Gilbert

helps if i read the footnote. woops


Also keep in mind that browsers try to “batch” CSS style property changes as much as possible, so multiple changes to a property within a single code block might not work as expected. I’m currently slugging it out with the WebKit people over this.

The nearly-in-beta script.aculo.us 2.0 will automatically use a CSS transition if it thinks it’s possible, and will even convert some style changes to their “-webkit-transform” equivalents so that they can be hardware-accelerated.



mike

isn’t that what you need for a bouncing ball animation?
(from the apple developer docs http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Animations/Animations.html#//apple_ref/doc/uid/TP40008032-CH6-SW1)

Listing 3 Using timing functions in keyframes
@-webkit-keyframes bounce {

from {
-webkit-transform: translateY(100px);
-webkit-animation-timing-function: ease-out;
}

25% {
-webkit-transform: translateY(50px);
-webkit-animation-timing-function: ease-in;
}

50% {
-webkit-transform: translateY(100px);
-webkit-animation-timing-function: ease-out;
}

75% {
-webkit-transform: translateY(75px);
-webkit-animation-timing-function: ease-in;
}

to {
-webkit-transform: translateY(100px);
}

}



lockoom

Nice. How about making it Opera (by adding -o- prefix) and future (no prefix) compatible?


How can I do it, while displaying a slide show of the posts on my website? Like i want a delay of 5 seconds between each post to slide in, i want 5 – 7 posts on the slide show. And tell me how u added this demo in your post, like which tool u used?


It’s a real shame it’s not cross-browser compatible at the moment, but tested in Firefox and it’s a really nice effect!

I can’t wait for the day all browsers use the same rendering engine, it will make life so much easier!!

Regards

Rob



Dillon Kuehner

It’s only not cross-browser compatible because he chose not include all of the vendor prefixes and/or the general transition code without a prefix.



witek

What about Opera? They use “-o-transition” now for this.


Hello. It is great that at least you pour more light on this issue. Thanks.


Another problem with transitions: you cannot layer and cascade them in CSS, and the syntax is just messy. See http://www.jaanuskase.com/en/2010/06/css3_transitions_and_their_lan.html



Christopher Giffard

Looks great – but I have a tiny nitpick:

There’s an error in your example – you’ve used the function name ‘animateWithCSS’ in your example code, but the real function name uses lower case s letters, as in ‘animateWithCss’.

It threw me for a while!

Thanks again – this is really interesting work.



Christopher Giffard

Another interesting observation – (forgive me if I’m repeating what we already know here!) in order to get opacity transitions hardware accelerated on the iPad and iPhone, you have to pair the opacity declaration with a transform. Both -webkit-transform: scale(1); and -webkit-transform: rotate(0deg); seemed to have the desired effect (but they do cause some subpixel misalignment issues around the edges of transformed elements, where content underneath them which should be obscured shows through.)



Rensa

Thanks, its awesome!


improve mens belts the laws that protect workers’ cheap gucci belts rights to combat poverty, according cheap louis vuitton belts for men cheap desiger belts to the Joseph Rowntree Foundation. gucci belts on sale He said the number louis vuitton belts cheap of people MBT often moving between unemployment and employment increased by 60% since 2006.


تااااااااااانكس


Wow I really glad to read that your given article tips for Animation with CSS. I like your tips. CSS plugin is laso too god.Great post.


So nice ….!!
Its very helpfull to me…

Thanks U for the post


University on her work; that lecture was similar to the one


University on her work; that


Awesome post dude, Just what I was looking for. Following you on twitter now :) – Keep up the good posts.

@mgpwr


Yesterday I’ve tried to extend Zepto’s anim plugin to handle CSS transitions and transforms simultaneously and support all modern browsers. During doing so noticed that Opera doesn’t detect property changes if the transition is applied together with the CSS and transforms. A simple setTimeout after applying the transition first is doing wonders though.


China wholesale beads store, free shipping, and very good post really



montanelas

vai levar no cu



montanelas

vai levar no cu!


Weird thing but the animation doesn`t work on my Chrome, is it my chrome or all of you guys?


This surealy has future!


Check this one out – http://cssload.net – it’s the first loading css generator. I have already offered them to add the animation transitions from your web-site


My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can’t imagine simply how much time I had spent for this information! Thanks!


Well written. Simple yet covers everything! Thanks for explaining the cubic bezier.

I hope by the time they are finished perfecting transitions, they will fix the problems you highlighted.


Thanks Aza, I have been looking for smoother css transitions using Jquery. Great article. Thanks


Pingback from koreyweldon.wordpress.com

Apple Nabs Microsoft’s Data Center Chief for…? [Blip] | koreyweldon


Once you discuss working with a person someone’s passion in addition to appreciation, they will possibly not ignore a student. Passion will clearly resume a student often. Many thanks.


My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can’t imagine simply how much time I had spent for this information! Thanks!



jack

allah


thnks
goooooooooooood
min:)ااا


thnks
goooooooooooood
min:)ااا
يلقفاعهخ


ه0تا9ا9ا


Je suis 100% d accord, j’apprécie votre style. Je dois dire que je ne regrette en rien de m’être abonné à votre weblog. Bonne journée

référencement internet http://agencewebmarketingmontpellier.wordpress.com référencement payant


Transitions are important. I like creating two classes and then using the animate class switch in the official jQuery UI

Here is a sample of some working code. I hope this helps someone.

demo

.newClass {
color: orange;
font-size: 10px;
}

.anotherNewClass {
color: pink;
font-size: 60px;
}

$(function() {
$( “#button” ).click(function(){
$( “.newClass” ).switchClass( “newClass”, “anotherNewClass”, 1000 );
$( “.anotherNewClass” ).switchClass( “anotherNewClass”, “newClass”, 1000 );
return false;
});
});

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.

Run Effect

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.



umair

I am new to CSS Transitions and no idea CSS Transitions so i have to conform something im making a runtime animation of a song
mean every song has its own type of animation its depends upon the songs.
in this web application in which im animating the song would be seen on video player as a video of the song diatonic accordion button would be shown in video which is pressed according to that song which i’ll got from the client in midi format.
so is it CSS Transitions is good for me is it capable of doing so



goutam naik

jkashflksdf;kshjsvnsksdhsnhfsf



rolas

hey, how i can make transition like in your random post above ?


Thanks very nice blog!

Check out my web page: workout routines (Milo)


The information is very interesting, good luck

Mengulas berita seputar kesehatan visit Berita kesehatan Secara gratis.


thanks bro


article is very nice and unique. thank you. Artikel kesehatan cari tahu tentang Cara mengobati cacar air


very good information – cari cari info di cara mengobati mata minus secara gratis



kk

mk



mks0491

Awesome introduction into the magical world of animation with css. Thanks for this article. For 10 shocking animations using CSS check out http://www.webdeveloperjuice.com/2010/02/25/10-shocking-animations-using-css-and-i-mean-only-css/


Ini neh artikel yang ane cari selama ini. Terima kasih


great posting.thank you


Nice info, I’ll try use it on my new website.



kavita

bad



kirti

very bad



seema

very …baddddddd



latika

veryyy…hard…bad



latika

nice


This water chemical analysis books is one of the country’s biggest chains, from uprooting
the trees in downtown Baguio, known as diatoms, are eaten by multiple organisms.
These assumptions, although considered reasonable by management at the time
were living on most wqter chemical analysis books of these
things? If I were to ose the following question, on our website, and
we just don’t realize it?


They’re the one of the more advanced games that can be found on the casino
floor. For starting the game reel 1 slots machine is used
and to end the game reel 1 is used and to end the game reel 3 is
stopped. But to avoid government prosecution, they all
the time, so that people can have same sort of pleasure as they have in land based casinos.
The one effort you need to excel for more fruitful gaming.


Last but not least, a concern that i was zealous about. We have searched regarding information with this good quality for the last many hours. Your site is tremendously valued.


Hrmm that was weird, my comment got eaten. Anyway I wanted to say that it is nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere. This was the first place that told me the answer. Thanks.



D Irish

Brilliant article! There is a topic on css transitions that you might like to take a look at

http://www.w3university.co.uk/csscoursetrans.html

Thanks,


Keep em coming. you all do such a great job at such Concepts. can t tell you how much I, for one appreciate all you do!


Hi webmaster, commenters and everybody else !!! The blog was absolutely fantastic! Lots of great information and inspiration, both of which we all need!b Keep em coming. you all do such a great job at such Concepts. can t tell you how much I, for one appreciate all you do!


But 40 years waste water collection 3 after the Supreme Court asked
the EPA to investigate. Environmental protection is an effective method for maintaining the high
quality that’s what wee have to have very strict rules
and regulations.


Have you ever considered adding more videos to your blog posts to keep the readers more entertained? I mean I just read through the entire article of yours and it was quite good but since I m more of a visual learner,I found that to be more helpful well let me know how it turns out! I love what you guys are always up too. Such clever work and reporting! Keep up the great works guys I have added you guys to my blogroll. This is a great article thanks for sharing this informative information. . I will visit your blog regularly for some latest post.


Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I ll be subscribing to your feed and I hope you post again soon.


That fantabulous post this has been. Within no way seen this kind associated with useful post. I am grateful to you and anticipate much more associated with posts such as. Thank you very much.


Wow, this was a really quality post. In theory I d like to write like this too taking time and actual effort to make a good post. but what can I say. I procrastinate alot and never appear to get something done.


I admit, I have not been on this webpage in a long time. however it was another pleasure to see It is such an essential topic and ignored by so numerous, even professionals. I thank you to help making people more aware of possible issueExcellent stuff as typical.


The post is pretty interesting. I really never thought I could have a good read by this time until I found out this site. I am grateful for the information given. your writing is also very excellent. Thanks for nice post. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.


Just what I needed. Thankyou I have been looking for this sort of information for ever. I have made note of your blog in order for me to read more on the topic.


i love your blog, i have it in my rss reader and always like new things coming up from it


I must tell you I am impressed. Very seldom do I encounter a blog that s both educative and entertaining. Just want to let you know that you have most definatly hit the nail on the head. Your thought is excellent. Thx is all I can say .


A powerful share, I just given this onto a colleague who was doing a little analysis on this. And he actually bought me breakfast as a result of I discovered it for him. . smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love studying more on this topic. If attainable, as you turn into expertise, would you mind updating your weblog with extra particulars? It s highly helpful for me. Big thumb up for this blog put up!


I actually learned about nearly all of this, but with that in mind, I think it is still useful. Great job!


Hello I found your blog by mistake when i was searching AOL for this matter, I must tell you your blog is actually useful I also adore the design, which is cool that!


With the whole thing that seems to be developing within subjects, all of your scenes are generally quite refreshing. Even so, I apologize, but I can not subscribe to your entire plan, all be it exhilarating none the less. It seems everyone your opinions are generally not completely Justified and in reality you are generally yourself not really fully convinced of the argument. In any case I do not appreciate a look.


I see you put a lot of work on this site! Keep writing!


Although I am not a noob in the website industry, your site is truly unique and features some useful insights. Enjoy it fully! I, ll have entered my blogroll, I think it will give more value to the visitor.


An interesting dialogue is worth comment. I feel that you should write extra on this topic, it won, Aot be a taboo subject but usually people are not enough to speak on such topics. To the next. Hail


I was imprssed with the quality of the information on this website. There are many great resources here. I am sure I will visit this place soon.


This is a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a major resource for free. I really loved reading your post. Thank you!


Super blog post, I count on updates by you.


I was very encouraged to find this site. I want to thank you for this special read. I definitely enjoyed every bit of it and I have you bookmarked to check out new stuff you post.


I admire the valuable information you offer in your articles. I will bookmark your blog and my children check here often. I am quite sure they will learn lots of new things here than anyone else!


Finally, an issue that I want. I have searched for information of this caliber for the last several hours. Your site is greatly appreciated.


Thank you for another essential article. Where else could one get this kind of information in such a complete way to write? I have a presentation next week, and I am on the look for such information.


This is the perfect blog for anyone who wants to know about this topic. You know so much it s almost hard to argue with you (not that I really want . HaHa). You definitely put a new spin on a topic that has been written about for years. Great stuff, just great!


This is a smart blog. I really do. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. You have a design here that is not too flashy, but makes a statement as big as what you say. Great job, in fact.


What you say is absolutely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I also adore the images you put in here. They will fit well with what you re saying. Im sure you ll reach so many people with what you say.


This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I m not the only one having all the enjoyment here! Keep up the good work.


We have searched regarding information with this good quality for the last many hours. Your site is tremendously valued.


Simple, wonderful what you ve done here. It is pleasing to look you express from the center and your clarity on this significant content can be easily viewed. Extraordinary items and expect your future updates.


Aw, this was a post that was really good. In theory I d like to write like this too taking time and real effort to make a good article . but what can I say . I procrastinate a lot and never seem to get something done that.


Far, this post is really sweet about this important topic. I am in harmony with the conclusions and are greedily looking forward to the update entry. Saying thank you will not just be sufficient, for the wonderful clarity in your writing. I will immediately grab your rss feed to stay informed of any updates. Wonderful work and much success in your business dealings! Please excuse my poor English as it is not my first language.


Let me start by saying beautiful post. Im not sure if this has been discussed about, but when using Chrome I can never get the entire site to load without refreshing many times. It may be my computer. Thank you.


I can see that you put a lot of effort into your blog. Keep posting the good work. Some really helpful information in there. Bookmark. Nice to see your site. Thank you!


Great stuff from you, man. Ive read your stuff before and youre too magnificent. I love what you ve got here, love what you say and how you say it. You make it entertaining and you still can stay smart. I can not wait to read more from you. This is really a great blog.


Not? T better written. Reading this post reminds me of my old room mate! He was always talking about it. I will forward this article to him. Pretty sure he will have a good read. Thank you for sharing!


Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that the most useful.


I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that the most useful


Great post! I m just starting out in the media community management marketing and trying to learn how to do it well resources like this article useful. As our company is based in the U. S. , it? S all a bit new to us. The example above is something that I worry about as well, how to show your own enthusiasm and share the fact that your product is useful in this regard


Hey, just looking around some blogs, seems a pretty good platform you are using. I m currently using WordPress for some of my sites but looking to change one of them to a platform similar to yours as a trial. Anything in particular you would recommend about it?


Hello! I know this is kinda off topic but I was wondering which blog platform are
you using for this site? I’m getting tired of WordPress because
I’ve had issues with hackers and I’m looking at alternatives for another platform.
I would be great if you could point me in the direction of a good platform.


“%KW%”


Thank for sahre I like


Transitions on opacity should be accelerated to a great extent, though.


I must admit that this is one great inasight. It surely gives a company the opportunity to get in on the ground floor and really take part in creating something special and tailored to their needs.


Does he stick to his story or pull the “I was hacked” card ?


You can not intended to do so, but I think you have managed to express the state of mind that a lot of people entering Taste want to help, but not knowing how or where, is something a lot us are going through.


You got a really useful blog I have here reading for about an hour. I am a newbie and your success is very much an inspiration for me.


Hrmm that was weird, my comment got eaaten. Anyway I wanted to say that it is nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere. This was the first place that told me the answer. Thanks.


Great post! I?m just starting out ina community management marketing media and trying to learn how to do it well resources like this article are incredibly helpful. As our company is based in the US, it?s all a bit new to us. The example above is something that I worry about as well, how to show your own genuine enthusiasm and share the fact that your product is useful in that case


Couldn?t be written any better. Raeading this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thanks for sharing!


Great stuff from you, man. Ive raead your stuff before and youre just too awesome. I love what youve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. This is really a great blog.


I can see that you are putting aa lots of efforts into your blog. Keep posting the good work. Some really helpful information in there. Bookmarked. Nice to see your site. Thanks!


you’re in point of fact a good webmaster. The website loading velocity is incredible.
It kind of feels that you’re doing any distinctive trick.
In addition, The contents are masterpiece. you have
done a excellent activity on this topic!


Great blog! Is your theme custom made or did you
download it from somewhere? A theme like yours with a few simple
adjustements would really make my blog stand out.

Please let me know where you got your design. Thanks

Here is my homepage :: 60 led tv (http://www.youtube.com)


Hey there! Do you know if they make any plugins to safeguard against hackers?

I’m kinda paranoid about losing everything I’ve
worked hard on. Any suggestions?

My weblog; make money Using facebook and twitter


Very nice post. I just stumbled upon your weblog and
wanted to say that I have really loved browsing your blog posts.
After all I’ll be subscribing for your feed and I am hoping you write once more very
soon!


It’s going to be finish of mine day, except before finish I am reading this impressive article to improve my know-how.

my page :: Minn Kota Talon Reviews (Http://Www.Youtube.Com/)


Yes! Finally something about clash of clans hack hack-free.


Bunch of thanks for sharing this interesting and informative post. Keep it up. gili islands tour


Leave a Comment