Loading Please Wait...
CSS animations make it possible to animate transitions from one CSS style configuration to another
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 sub-properties of the animation property are:
animation-delay: specifies the delay between an element loading and the start of an animation sequence.
animation-direction: specifies the duration over which transitions should occur (normal, reverse, alternate, alternate-reverse)
animation-duration: specifies the length of time in which an animation completes one cycle.
animation-fill-mode: specifies how an animation applies styles to its target before and after it runs (none, forwards, backwards, both)
animation-iteration-count: specifies the number of times an animation should repeat. (numbers, infinite)
animation-name: specifies the name of the @keyframes at-rule describing an animation's keyframes.
animation-play-state: specifies whether to pause or play an animation sequence. (running, pause)
animation-timing-function: specifies how an animation transitions through keyframes by establishing acceleration curves. Value are linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier()
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #1a1e49;
animation-name: chngeColor;
animation-duration: 4s;
}
@keyframes chngeColor {
from {background-color: #1a1e49;}
to {background-color: #9b87bc;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The CSS animation is a shorthand property to handle all animation sub properties in a single line.
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
animation: 3s linear slidein, 3s ease-out 5s slideout;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved