CSS3 > Animations

Translate animation in CSS3

How to use translate animation in CSS3?


Translate method()

Translate method is used to translate the text 

<style type="text/css">
        .showbox {
            float: left;
            margin: 4em 1em;
            width: 100px;
            height: 60px;
            border: 2px solid green;
            background-color: pink;
            line-height: 60px;
            text-align: center;
            -webkit-transition: 1s ease-in-out;
            -moz-transition: 1s ease-in-out;
            -o-transition: 1s ease-in-out;
            transition: 1s ease-in-out;
        }

            .showbox.slideright:hover {
                -webkit-transform: translate(3em,0);
                -moz-transform: translate(3em,0);
                -o-transform: translate(3em,0);
                -ms-transform: translate(3em,0);
                transform: translate(3em,0);
            }
    </style>
    </head>
    <body>
        <div class="showbox slideright">TechFunda</div>
    </body>

In the above code snippet we have defined the translate method, we have defined two styles in show box and show box slide right, in the show box we have defined the box size with color, background color, border etc and in the show box slide right with hover we have translate method which translate the method with the given values  

output

 Views: 413 | Post Order: 103



Write for us