xxxxxxxxxx
with the help of animation properties in CSS we can control
how the animation will be played throughout.
The animation properties in CSS are -
1) animation-duration : implies the time taken by the animation to finish.Forexample- animation-duration: 6s;
2) animation-direction : implies the direction of the animation.Forexample- the direction in which the horse rides , the car moves , the insects crawls.
3) animation-delay: implies the time after which is the animation starts.Forexample- animation-delay: 3s; means after 3seconds the animation will start.
4) animation-iteration-count: implies how many times the animation will repeat.
5) animation-timing-function: the values can be ease,ease-in, ease-out, linear, ease-in-out.
6) animation-play-state: the values can be paused, running, initial, inherit.
7) animation-name: implies the name of the animation which is assigned by us.
8) animation-fill-mode: it specifies a style for the element when the animation is not playing.The values can be none,forwards, backwards, both, initial and inherit.
9) @keyframes: this is the most important.It specifies the different values of style in different intervals of time.The animation-name is used in @keyframes declaration.
NOTE: the syntax of every single letter, numbers, punctuation mark is very important.
xxxxxxxxxx
<style>
@keyframes animatename{
0%{
transform: translateY(3px);
}
100%{
transform: translateY(-3px);
}
}
.my-div{
animation: animatename 1s linear infinite;
/* animation shorthand */
animation: animation-name animation-duration animation-direction animation-iteration-count
}
</style>
xxxxxxxxxx
/* Animation-name: Specifies the name of the keyframe */
animation-name: clashing;
/* Animation-duration: Defines how the time is taken for the execution of animation. */
animation-duration: 10s;
/* Specifies the speed of the animation. */
animation-timing-function: ease;
/* Animation-delay: Specifies a delay before the animation will start */
animation-delay: 5ms;
/* Animation-iteration-count: Determines how many times an animation should be played */
animation-iteration-count: 3;
/* Animation-direction: Determines the play direction of animation(i.e alternate or reverse) */
animation-direction: normal;
/* Determines what values are applied by the animation outside the time it is executing */
animation-fill-mode: both;
/* Animation: Shorthand Property. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. */
animation: 4s linear 0s infinite alternate;
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
/* Define the animation */
@keyframes move {
0% { transform: translateX(0); } /* Initial position */
50% { transform: translateX(200px); } /* Intermediate position */
100% { transform: translateX(0); } /* Final position */
}
/* Apply the animation to an element */
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s infinite; /* Run the animation for 2 seconds and repeat indefinitely */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
xxxxxxxxxx
.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover {
transform: scale(0.9);
}
xxxxxxxxxx
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100px, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.class-name{
/* advance */
/* animation: 2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s 1 fadeInRight; */
/* basic breakdown */
animation-duration: 2s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: .3s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: fadeInRight; /* the name of the animation we defined above */
}
xxxxxxxxxx
Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM
xxxxxxxxxx
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
/*
name: name of the animation
duration: amount of time it takes to complete ex: 2s
timing-function: Specifies the speed curve of the animation ex: linear, ease, etc.
delay:Specifies a delay before the animation will start
iteration-count: how many times to play the animation, ex: initial
direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse
fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both
animation-play-state: Specifies whether the animation is running or paused
*/
xxxxxxxxxx
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
xxxxxxxxxx
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.pulse {
width: 70px;
height: 70px;
background-color: red;
border-radius: 50%;
position: relative;
animation: animate 3s linear infinite
}