CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More
CSS animation makes it easy to transition properties to a new value over time. They also have the ability to jump properties to a new value virtually instantly. The trick is to use two keyframes with a very small difference, around .001% works well.
Make A CSS3 Animated Image Slider
CSS: Transition Timing Functions
This article follows on from the related article on Animation using CSS Transforms and covers the transition-duration, transition-timing-function and other related CSS3 properties which affect the timing of animations.
Loading Effects for Grid Items with CSS Animations
Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.
CSS3 hover effect transitions, transformations and animations
Slide And Push Menus With CSS3 Transitions
In this tutorial, we’re going to create some slide and push menus using CSS3 transitions. The menus will be hidden off the screen at first, and will transition into view when the “toggle menu” button is pressed.
How to Create Smooth CSS3 Animation Styles and Effects with Ease
Transitions & Animations – An Advanced Guide to HTML & CSS
An Introduction To CSS3 Keyframe Animations
Animation of How CSS Triangles Work
The root of the trick is that borders on elements meet each other at angles. So if one is transparent and the other isn’t, it appears as if the whole shape is a triangle. You can turn “on and off” different borders and use different heights/widths to get different triangle shapes pointing different directions.
Advanced CSS3 Animation Effects
We’ve now covered the majority of CSS3 animation properties but there’s another of which few developers are aware…
CSS transition from/to auto values
None of the browsers handle CSS transition from/to auto values correctly.
Text Opening Sequence with CSS Animations
Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS.
Creating Advanced “Marquee” with CSS3 Animation
Replacing Subtle Flash Animations with CSS3
I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design. Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.
How To Build A Pricing Table With CSS3 Animation
Quite often I’m given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that there are ways to improve the look of this just by using CSS. When I put this suggestion forward to the graphic designer they said no and want to me to just make the table and everything else was going to be images.
Playing with Fire: Organic CSS3 Animation
Who hasn’t experienced the site with the endlessly spinning logo? Who hasn’t been driven to distraction by that industrious little construction worker toiling away behind an “Under Construction” sign? It raises an obvious question: Is it possible to use animation without introducing these mind-torturing loops?
Creative CSS3 Animation Menus
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
Easy CSS3 Animation with Animate.css
CSS3 Animation With jQuery Fallbacks
Build Awesome Apps with CSS3 Animations
Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.
Create a CSS3 Image Gallery with a 3D Lightbox Animation
For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.
Super Cool CSS Flip Effect with Webkit Animation
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.
Animated Buttons with CSS3
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
CSS3 Animated Media Queries
In this article we are going to look at media queries, have a code snippet you can use to start your media queries and show how you can combine CSS transition with the media queries to show an animated change to your elements.
3d animation using pure CSS3
A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?
Thanks for including some of my tutorials.