Google trends Public Holidays Coupon Code Code Compiler

CSS effect Roll Out Animation


Jan 14, 2019

CSS effect Roll Out Animation

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. An Element can move in a particular direction by turning over and over on an axis.

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:5s;
                animation-duration:5s;
                -webkit-animation-fill-mode:both;
                animation-fill-mode:both
            }
            
            @-webkit-keyframes rollOut{
		0%{
		  opacity:1;
		  -webkit-transform:translateX(0)rotate(0);
		  transform:translateX(0)rotate(0)}
		100%{
		  opacity:0;
		  -webkit-transform:translateX(100%)rotate(120deg);
		  transform:translateX(100%)rotate(120deg)
                }
			
             }
	     @keyframes rollOut{
		 0%{
		   opacity:1;
		   -webkit-transform:translateX(0)rotate(0);
		   -ms-transform:translateX(0)rotate(0);
		    transform:translateX(0)rotate(0)}
		  100%{
		     opacity:0;
		     -webkit-transform:translateX(100%)rotate(120deg);
		     -ms-transform:translateX(100%)rotate(120deg);
		      transform:translateX(100%)rotate(120deg)}
		   }
	     .rollOut{
		 -webkit-animation-name:rollOut;
		 animation-name:rollOut
	      }

HTML Code:


           <div class="wrapper">
           
                <!-- item -->
                <div class="item animated rollIn">
                    <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 rollIn">
                    <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 rollIn">
                    <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 rollIn">
                    <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