CSS Animation :
CSS Animation property is used to create animation on the webpage.
It can be used as a replacement of animation created by Flash and JavaScript.
CSS3 Keyframe Rule
The animation is created in the keyframe rule.
It is used to control the intermediate steps in a CSS animation sequence.
What animation does
An animation makes an element change gradually from one style to another. You can add as many as properties you want to add. You can also specify the changes in percentage.0% specify the start of the animation and 100% specify its completion.
How CSS animation works
- When the animation is created in the @ keyframe rule, it must be bound with selector; otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:
The name of the animation
The duration of the animation
CSS animation properties
| Property | Description |
| @ keyframes | It is used to specify the animation. |
| animation | This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property. |
| animation-delay | It specifies when the animation will start. |
| animation-direction | It specifies if or not the animation should play in reserve on alternate cycle. |
| animation-duration | It specifies the time duration taken by the animation to complete one cycle. |
| animation-fill-mode | it specifies the static style of the element. (when the animation is not playing) |
| animation-iteration-count | It specifies the number of times the animation should be played. |
| animation-play-state | It specifies if the animation is running or paused. |
| animation-name | It specifies the name of @keyframes animation. |
| animation-timing-function | It specifies the speed curve of the animation. |
CSS @ keyframes Rule :
The @ keyframes rule in CSS is used to specify the animation rule.
An animation is created by using changeable CSS styles.
During the animation CSS property can change many times.
We need to specify when there is a change in style that takes place in percent, or contains the keywords “from” and “to”, which is the same as 0% and 100% where 0% represents the beginning of the animation & 100% represents the completion of the animation.
We can control the appearance of the animation by using animation properties & is possible to bind the animation to selectors.
The keyframe ignores the !important rule in CSS.
Syntax:
@ keyframes animation-name {keyframes-selector {css-styles;}}
Property value: This parameter accepts three values that mentioned above and described below:
animation-name: The animation-name is required and it defines the animation name.
keyframes-selector: The keyframes-selector defines the percentage of the animation. It lies between 0% to 100%. One animation can contain many selectors.
css-styles: The css-styles defines the one or more legal or applicable CSS style properties.
CSS pseudo-classes :
A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements.
It is added to the selector for adding an effect to the existing elements based on their states.
For example, The ":hover" is used for adding special effects to an element when the user moves the cursor over the element.
The names of the pseudo-class are not case-sensitive.
Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class {
property: value;
}
Although there are various CSS pseudo-classes, here we are going to discuss some of the most commonly used pseudo-classes.
The widely used CSS classes are tabulated as follows:
| pseudo-class | Description |
| :active | It is used to add style to an active element. |
| :hover | It adds special effects to an element when the user moves the mouse pointer over the element. |
| :link | It adds style to the unvisited link. |
| :visited | It adds style to a visited link. |
| :lang | It is used to define a language to use in a specified element. |
| :focus | It selects the element which is focused by the user currently. |
| :first-child | It adds special effects to an element, which is the first child of another element. |
Example:
<!DOCTYPE HTML>
<html>
<style>
form{
text-align:center;
}
input:focus{
border:5px solid lightblue;
box-shadow:10px 10px 10px black;
color: blue;
width:300px;
}
</style>
<body>
<form>
<h1>Name: <input type="text" value="Enter your name"></h1>
</form>
</body>
</html>
Output:
Befor:
After:
CSS Pseudo-elements :
A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements.
Unlike the pseudo-classes, the pseudo-elements are used to style the specific part of an element, whereas the pseudo-classes are used to style the element.
As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.
Syntax :
Pseudo-element has a simple syntax which is given as follows:
selector::pseudo-element {
property: value;
}
We have used the double colon notation (::pseudo-element) in the syntax.
In CSS3, the double colon replaced the single colon notation for pseudo-elements.
It was an attempt from W3C to differentiate between the pseudo-elements and pseudo-classes.
So, it is recommended to use double colon notation (::pseudo-element) instead of using single-colon notation (:).
PauseNextUnmuteCurrent Time 0:24/Duration 18:10Loaded: 7.34% Fullscreen
In CSS1 and CSS2, there is the use of a single colon (:) syntax for both pseudo-elements and pseudo-classes.
The single colon syntax is valid for pseudo-elements in CSS1 and CSS2 for backward compatibility.
Although there are several CSS pseudo-elements, we are discussing some of the most commonly used.
The widely used CSS pseudo-elements are tabulated as follows:
| pseudo-element | Description |
| :: first-letter (:first-letter) | It selects the first letter of the text. |
| ::first-line (:first-line) | It styles the first line of the text. |
| ::before (:before) | It is used to add something before the element's content. |
| ::after (:after) | It is used to add something after the element's content. |
| ::selection | It is used to select the area of an element that is selected by the user. |
CSS translate() function
The translate() function is an in-built function of CSS to repositions the element either in the vertical or in the horizontal direction.
It moves the element from its current direction based on the given parameters.
Syntax:
transform: translate(tx)
transform: translate(tx,ty)
he parameter ty is optional. If it is not specified, its value is assumed to be zero. Now, we are going to discuss each parameter in detail.
Parameters :
tx: This parameter defines the translation length along the x-axis. It represents the abscissa (horizontal, x-coordinate) of the translating vector. If we write translate(4), then it will be equivalent to translate(4,0).
ty: It defines the translation length corresponding to the y-axis. Its default value is 0, which is used when the value of this parameter is not defined.
Conclusion:
Is article explores Advanced CSS Properties and their representation, as well as the pros and cons of each. We delve into commonly used methods for defining Annimation in CSS.Feel free to leave any comments or questions below. If you found this article informative, please share it with your network. Thank you.
What Next ?
Advanced CSS Such As Media Query ....