Google trends Public Holidays Coupon Code Code Compiler

Fade In Left Animation Effect with CSS


Jan 21, 2019

Fade In Left Animation Effect with CSS

How to implement the Fade In Left Animation effect with CSS? How can I work with it correctly? An example would work great for me in understanding the working of the effect on a web page.

CSS Code:


           .wrapper
            {
                text-align: center;
                width: 800px;
                margin: auto;
                font-family: Muli !important;
            }
            img{
                width: 100%;
            }
            p{
                font-size: 16px;
            }
            .item{
                display: inline-block;
                width: 21%;
                border: 1px solid silver;
                height: 288px;
                vertical-align: top;
                padding: 12px;
            }
            .animated{
                -webkit-animation-duration:1s;
                animation-duration:1s;
                -webkit-animation-fill-mode:both;
                animation-fill-mode:both
            }

            @-webkit-keyframes fadeInLeft{
                0%{
                    opacity:0;
                    -webkit-transform:translateX(-200px);
                    transform:translateX(-200px)}
                100%{
                    opacity:1;
                    -webkit-transform:translateX(0);
                    transform:translateX(0)
                }
            }
            @keyframes fadeInLeft{
                0%{
                    opacity:0;
                    -webkit-transform:translateX(-200px);
                    -ms-transform:translateX(-200px);
                    transform:translateX(-200px)}
                100%{
                    opacity:1;
                    -webkit-transform:translateX(0);
                    -ms-transform:translateX(0);
                    transform:translateX(0)
                }
            }
            .fadeInLeft{
                -webkit-animation-name:fadeInLeft;
                animation-name:fadeInLeft
            }

HTML Code:


<div class="wrapper">
              
            <!-- item -->
            <div class="item animated fadeInLeft">
                <img src="logo.png" alt=""  />
                <h3>Web Designing</h3>

                <p>Our designers offer services to small to mid size, and High level companies to expand their business</p>
            </div>
            <!-- End item -->

            <!-- item -->
            <div class="item animated fadeInLeft">
                <img src="logo.png" alt=""  />
                <h3>Web Development</h3>

                <p>Our development team has efficiency to achieve the output specifically to meet up your requirements and your adequate level.</p>
            </div>
            <!-- End item -->

            <!-- item -->
            <div class="item animated fadeInLeft">
                <img src="logo.png" alt=""  />
                <h3>Mobile App Development</h3>

                <p>Our dedicated mobile app experts are creative and familiar to accomplish your requirements as well as your business needs in cost-effective approach.</p>
            </div>
            <!-- End item -->

            <!-- item -->
            <div class="item animated fadeInLeft">
                <img src="logo.png" alt="" />
                <h3>Software Development</h3>

                <p>Our Highly skilled software Developers offers services to small to mid size, and High level companies in cost effective approach.</p>
            </div>
            <!-- End item -->
        </div>

Copyright 2024. All rights are reserved