Animations and Transforms

Css animations

CSS provides keyframes to create animated effects in the webpages. Inside the keyframe we can define the rules to the flow of the animation to the elements.

The keyframes syntax will look like

@keyframe Name_of_the_Animations {
    here you can define the animations
}

inside the keyframes we have to define each step, here each step means from the beginning to ending of the animation competition. We are able to add several stages, for example how the initial stage the element wants to animate and how it looks in the middle of the animation, how it wants to appear, and finally how it wants to end. Not only with these steps we can add more and more steps in between the starting and ending and also we can be able to do as many as possible steps to attract animation.

Here you can say the animation first we use the percentages.

We want to define the steps of what our element wants to do at the exact moment of the whole animation duration.

Definitely the 0% and 100% will the starting and the ending of the
animations. Suppose if you want to add any particular change at the middle of the animation it wants definite at the 50%.

lets we try the pulsing animation

.btn {
background-color: green;
height: 50px;
width: 50px;
border-radius: 50%;
animation: MovingRightToLeft 7s;
animation-iteration-count: infinite;
}

@keyframes MovingRightToLeft {
0% {transform: scale(1);}
20% {transform: scale(1.2);}
50% {transform: scale(1.4);}
60% {transform: scale(1.5);}
75% {transform: scale(1.1);}
50% {transform: scale(1);}
}


<div class="btn">
</div>

Animation properties

animation-name : keyframe name
the keyframe name must be defined if you give a random keyframe name it does not work.

we can be able to define more the one animation

animation-duration : how long you want to animate it, mostly here developers use seconds to define the duration time, eg: 2s is equivalent to 2 seconds.

Animation-delay : when it want to start to progressing the animation,

animation-iteration-count : how many time you want do that animation for you object, you can define here n countable time, and even infinite

animation-timing-function: how the animation progresses through the duration of each cycle; there are some of the types in the animation-timing-function and they are linear, ease-in-out, ease-out, ease-in

animation-direction: helps to define the animation direction does the animation want to play only in the forward direction or reverse direction otherwise play in an alternate(both reverse and the forward)

animation-fill-mode: it helps to define what styles are applied to an element before the animation starts (during a delay) and after the animation finishes.

this is the one the animation given in the MND documentation

<h1 class="grow">
welcome
</h1>


.grow {
font-size: 20px;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: grow-animation 3s infinite;
}

@keyframes grow-animation {
0% {
font-size: 20px;
}
100% {
font-size: 70px;
}
}

Transform property

This property helps to allow you to visually alter the elements by rotating, scaling, skewing and moving them in 2D or 3D spaces.

This transform provides some core functions to implement the visual altars.

translate(x-axis, y-axis) : using this property we can be able to translate the object to give a and y axis coordinates, it starts from the current position of the object to make move the element appear in the give coordinates

or otherwise you can do it only any one of the direction

translate(x,y)
translateX() only one the x-axis
translateY() only one the y-axis

rotate(angle) it will tilt the object to the defined angle in this function.

Scale(x,y) it helps to make to grow the element or shrink the elements

similarly like translate you can do it only any one of the direction

scale(x,y)
scaleX() only one the x-axis
scaleY() only one the y-axis