My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
How Animation Work in Css

How Animation Work in Css

Dumto's photo
Dumto
·Jun 18, 2019

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. While i was learning css animation, i got a basic knowledge on how the animation works. The animation could be when you load the site, if you hover or maybe an active state. on an element.

For you to create an animation, add a style describing your css animation, then you need to declare a keyframe and give the keyframe a name, and you define a timing inside it. Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence .

The animation shorthand property in the text class has different properties, but in this case I'll be using only 3 of its property which are the animation name, duration and timing function sample :

.text {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
    animation: slideInFromRight 1s ease-out;
}


@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

So in this piece of code we have a text class which we want it to slide from the right side of the screen to the center. At the beginning of the keyframe it would be transparent and also slide in from the right ( X axis, the right has a positive value while the left has a negative value). At 80% we move 10px from left in order to make it look like it is bouncing, and at 100% we have a text which would show vividly well and take its original position.

Below is the link to explain the code snippet above

checkout the link

Feel free to correct me if i have made any mistake winks!