create css transition

Posted under CSS3 Course On By mohammed.mutawe

CSS transition

CSS provides us with many advantages found in other graphics libraries, which is the transition feature, which is based on transformation and change via the frames timer, which allows elements to appear in an eye-catching way.

 

Definition

CSS has a simple timer that is called very easily and generally has a basic syntax:

transition:all 1.5s ;

The transition function is based on making some modifications to the special HTML tag that it contains, where its basic elements are divided into:

  • All : It is the automatically defined value, which indicates that modifications have been made to all elements without exception, as we can modify it to any element and add its own transition.
  • seconds : It indicates the time it will take to make the change, as it indicates the number of seconds and the time period.

 

Benefits

There are many benefits that we will find when using transition, namely:

  • Add features and aesthetics to the content in a wonderful way.
  • Formatting HTML tags while preserving the general appearance of the page.

 

Cons

As usual, there are weaknesses and strengths in all tools, and we will mention the weaknesses during transition, namely:

  • Slow sometimes when loading the contents of the page.
  • Responsive problems for peripherals and small screens making it limited use.

 

Example

Please, to understand CSS transition well, copy the following codes and run it in your browser.

CSS

div{
    width:100px;
    height:100px;
    text-align:center;
    background-color:#D9D9D9;
    margin: 50px Auto;
    color:#FFFFFF;
    transition:all 1.5s , background-color 6s;
}

div:hover{
    width:200px;
    height:200px;
    background-color:#390505;
    font-size : 30px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Transition</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>Welcome To CSS</div>
    </body>

</html>