A Beginner’s Introduction to CSS Animation - Tuts+ Web Design Tutorial. Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on.
When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users. In this tutorial I am going to introduce you to CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves. Having covered the basics, we're going to build a quick example which will animate a square element into a circle: The designers on Envato Market have been busy creating a range of CSS animations for you to plug in to your websites, from shadows to ribbons, sliders, and more. CSS Transitions and Transforms for Beginners. This post will introduce you to CSS transitions and CSS transforms: the CSS power couple.
When used together, these properties allow you to create simple animations and add valuable interaction and visual feedback for your users. Just remember when adding any kind of movement to your project to keep it simple, subtle, and consistent. The movement you create should convey meaning, always enhancing, not distracting from the interaction for your users. So what are transforms and transitions? At their most basic level, transforms move or change the appearance of an element, while transitions make the element smoothly and gradually change from one state to another. Animation. The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width.
Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen. Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated. Sub-properties These sub-properties can then be used like so: See the Pen EjaJNd by CSS-Tricks (@css-tricks) on CodePen. Here's a full list of which values each of these sub-properties can take: Multiple steps Multiple animations You can comma-separate the values to declare multiple animations on a selector as well.
Performance Prefixes. Animation. Transition. The transition property is a shorthand property used to represent up to four transition-related longhand properties: These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
Here is a simple example that transitions the background color of a <div> element on :hover: That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition: You can specify a particular property as we have above, or use a value of "all" to refer to transition properties. In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand. You may comma separate value sets to do different transitions on different properties: For the most part, the order of the values does not matter -- unless a delay is specified.
Related Properties Other Resources Browser Support. Using CSS transitions. This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for usage in various browsers.
Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes. 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. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. Which CSS properties are animatable? HTML Content. CSS Transition (CSS Animations Series Part 1) Html - How to trigger animation after user scroll to N points - jQuery waypoints with multiple animation .animate()
Css - Targeting multiple elements with jQuery.