CSS animation is a proposed module for Cascading Style Sheets that allows designers and developers to add animations by editing the CSS code of their websites, instead of uploading GIF or flash images directly. With CSS animation, you can animate certain HTML elements without having to use processor and memory-hungry JavaScript or Flash.
Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties.
The animation properties applies an animation between styles. The animation property is a shorthand property for:
animation-name, animation-duration, animation-timing-function,animation-delay, animation-iteration-count, animation-direction,animation-fill-mode, and animation-play-state.
There's relationship between animation and @keyframes . Animation is a CSS property and to apply animation on the element which we create, we use @keyframes.
The @keyframes at-rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using @keyframes.
The animation-name property is used to specify one or more names of animations defined by @keyframes at-rules, that are to be applied to the selected element.
A @keyframes at-rule specifies the property values that are to be animated over a sequence of animation keyframes.
You can specify either one animation name in animation-name or a list of comma-separated names. Each name belongs to a @keyframes identifier. If the animation name specified using animation-name does not exist, no animation is applied.
The @keyframes rule specifies the animation code and it describes how the animated element should render at a given time during the animation sequence.
The CSS transform property is also used to alter the original form of an element. To do this, we can scale, rotate, skew, or translate the element. This can be achieved using the 2D or 3D transform property functions. The transform CSS property specifies a handful of transformation functions that can be combined any way you wish: scale(), skew(),translate(),rotate() and matrix().
- scale(width, height): the scale function is used to alter the size of the element. The default value is 1. Values below 1 scales element down and values above 1 scales element up. Specifying only one value means that both width and height will be proportionately scaled.
- skew(x, y): the skew function is used to distort an element along the horizontal axis(x-value). Or along the vertical axis(y-value), or on both axis.
- translate(x, y): the translate function is used to move an element along the x-axis or the y-axis. It works like a relatively positioned element.
- rotate(deg): the rotate function is used to rotate an element either clockwise or anti-clockwise. Element rotates clockwise between 0-360 degrees or anti-clockwise if the rotate value is negative.
- matrix(): the matrix function is used to combine all the 2D transform functions together.
CSS Animations are great for animations that are relatively simple, because of the way@keyframesis structured. If you want to create a more complex animation, I will recommend you use Javascript to create your animation instead.
That’s it! With those basic properties, the possible animations you can create are endless.
Here is a resource file to get you started:
CodePen-The flying birds
Top comments (1)
Beautiful!!!!!