Animations
Animations on web pages can be created with the help of CSS animation property. Using animation, an element’s style can be changed. Some animation properties which can be used are as follows:
- @keyframes
- animation
- animation-name
- animation-duration
- animation-delay
- animation-direction
- animation-iteration-count
- animation-fill-mode
- animation-timing-function
Multiple animations’ concept
There is a possibility to apply multiple animations by separating them using a comma and then declaring all the required animations on a selector.
Animations’ performance
There is a huge performance concern while animating most of the properties, so we must proceed cautiously before applying animation to any property. Here are a few combinations which can be safely animated:
- 1. transform: translate()
- 2. transform: scale()
- 3. transform: rotate()
- 4. opacity
A detailed description of the sub-properties of animation:
- animation-name: It declares the @keyframes’ names for manipulating.
- animation-duration: The time length required for completing one cycle of the animation.
- animation-timing-function: It establishes the curves for preset acceleration, like linear or ease.
- animation-delay: time gap between loading the element and starting the animation sequence.
- animation-direction: It sets the animation direction after the cycle.
- animation-iteration-count: It is the number of times of performing the animation.
- animation-fill-mode: It sets the values applied before or after the animation.
- animation-play-state:It is used to play or pause the animation.
Example:
<![CDATA[
<html>
<html lang="en-US">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<div></div>
</body>
</html>]]>
OUTPUT:
