Press "Enter" to skip to content

2D Animations Examples in CSS

Last updated on October 5, 2019

Definition :

These are the animations which are meant for performing operations based on the dimensions and directions provided within the animations.

Program 1 :

<html>

     <style type=”text/css”>

                     div

                                 {

                                 margin-top: 100px;

                                 width: 100px;

                                 height: 100px;

                                 font-size: 25px;

                                 border: 1px solid red;

                                 background-color: green;

                                 transfprm: translate(1000px, 100px);

                                 }

                </style>

                <body>

                     <div> Hello </div>

                </body>

</html>

Program 2 :

<html>

<style type=”text/css”>

div

{

margin-top:100px;

width:100px;

height:100px;

font-size:25px;

 border:1px solid red;

 background-color:green;

 transform:rotate(90deg);

}

</style>

                                <body>

<div>HELLO</div>          

                                </body>

</html>                              

Program 3 :

<html>

<style type=”text/css”>

div

{

margin-left:100px;

width:100px;

height:100px;

font-size:25px;

 border:1px solid red;

 background-color:green;

 transform:skew(20deg,10deg);

}

</style>

                                <body>

<div>HELLO</div>          

                                </body>

</html>                              

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *