Join us here on October 1st at 2pm (PDT) as Tiffany Brown visits the forums to chat about CSS animations, transforms and transitions. That’s right, you now have your chance to have your CSS animation questions answered and join a thriving discussion.
We’re sure you’ll have many questions for Tiffany but if you’re unsure whether you can join the event, feel free to jump the queue and leave your questions here ahead of the event. Alternatively, leave your questions on Twitter using #TiffanyChatsCSS.
Not sure when this is happening in your timezone? This link should help.
Tiffany is the author behind SitePoint’s latest book CSS Master, freelance web developer and blogger on tiffanybbrown.com. We’re excited about our upcoming chat with this savvy CSS author.
It will happen here live, so this topic will be a living transcript. If you have any questions right now, you can go ahead and post them. They’ll cover them even if you aren’t available to be here during the actual event.
As I’ll likely not be around then (midnight here), I’ll ask a question.
Right now, I see a very many people talking about animation and its possibilities, but beyond what appear to be very impressive test pieces - Chris Gannon’s Lava Lamp, I’m not entirely sure where they fit in the lexicon of web design. How do you anticipate they will be used on a business website (for example) and do you have any examples you can point at?
Sure :-). I’m a freelance developer, based in Los Angeles, California (USA). I’m also the author of CSS Master, and co-author of another SitePoint book, Jump Start HTML 5. Before freelancing, I was part of the Opera Developer Relations team, and worked for small agencies in Atlanta. Now I do front-end development and write books, blog posts, articles, and what-not.
Hi @webinista! I was wondering if if you have any tips or rules for smooth, performant animations? Is there anything we should stay away from animating?
Hey - nice to meet you
What was the last trick regarding animations or transitions that you considered very useful or tricky?
For example mine was one regarding animation-delay - if i want multiple animation to start from the begining of page load i’ll give negative values so I could keep the delay between them. Thanks!
We’re starting to see animations and transitions on business websites. MailChimp has one of my favorite examples. After you schedule an e-mail, there’s an animated SVG of a chimp holding up “metal fingers” encouraging you to “Rock on.” Unfortunately, it’s only visible to logged-in customers.
I do think you’ll see animation – and I’m including transitions – used to add that sort of whimsy. You can do clever loading animations and hover effects. Say, revealing an entire object on hover by animating the clip-path property. McDonald’s may animate their arches logo. I think you’ll also see animated charts in combination with SVG.
