/* 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;
@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 */
}
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
*/
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.
/* 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;
}
Read this helpful, short and straightforward article to learn CSS animation perfectly.
https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd
<!-Here we have a button that will animate a circle within it-->
<!--This is the HTML Element to Animate, Its parent is the HTML Body Element-->
<button>
Refresh the Screen <span class="circle" style="top: 27px; left: 82px"></span>
</button>
/* css for animatiing a circle inside a button to expand see video below */
button .circle{
position: absolute; /*Positioned absolute inside the parent element, button*/
background-color: white;
width: 100px;
height: 100px;
border-radius: 50%;/*turns the item into a circle*/
transform: translate(-50%, -50%) scale(0); /*scales it down to nothing, moves it
along the x and y axis from origin*/
animation: circle-animation 0.5s ease-out; /*animation name, time, effect*/
}
@keyframes circle-animation {
to{
/*The Item is scaled out with the ease out effect above*/
transform: translate(-50%, -50%) scale(3); /*scales the circle to ripple out*/
opacity: 0; /*Then the circle disappears./*
}
}