CSS-Note/Transitions in CSS.html at main · CoderTahmid/CSS-Note · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/* Transitions in CSS */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/style.css" />
    <style>
      div {
        height: 50px;
        width: 50px;
        border: 2px solid black;
        transition-property: all;
        /*
        acchah, transition-property: muloto add kora hoy only transition-duration ke maintainkorte,
        orthat transition-property: all; set kora hoile,
        oi element'r jonne set kora all transition'r khetre duration dekha dibe,
        ar jodi transition-property: height; set kora hoy only,
        tahole oi element'r only height transition'r khetre duration dekha dibe
        transition-property: width; set kora hoile,
        oi element'r only width transition'r khetre duration dekha dibe
        */
      }

      #box1:hover {
        background-color: rgb(193, 20, 49);
        color: green;
        /*
        hover mane oi element'r upre cursor newa,
        ekhane oi div'r upre cursor nile ei effect gula dekha dibe
        */
      }
      #box2:active {
        background-color: blue;
        color: wheat;
        /*
        ekhane oi div e click korle ei effect dekha dibe
        */
      }
      #box3:hover {
        background-color: rgb(177, 50, 152);
        height: 60px;
        width: 60px;
        transition-duration: 2s;
        /*
        ekhane element tar upre mouse hover korar 2 sec pore ei effect ta dekha dibe
        */
      }
      #box4:hover {
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        transition-duration: 4s;
        transition-timing-function: ease-in;
        /*
        transition-timing-function diye muloto jokhon transition hbe
        tokhon ta kibhabe hbe oita maintain kora jay
        kintu tokhon transition-duration'r ekta value thaka lagbe must
        value na thakle tyle eta dekha jabe na
        ekhane transition-timing-function: ease-in; set kora te dekha jacche je
        element ta te hover korar por aste aste eta effect show korse then last'r dike aisha hut korei effect show korse,
        and ei pura proccess ta hoise 2sec'r moddhe
        */
      }
      #box5:hover {
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        transition-duration: 4s;
        transition-timing-function: ease-out;
        /*
        eta exactly ease-in er ulta,
        ease-in e shurur dike aste aste jeye last'r dike onek fast hoito
        but ekhane age fast hbe onek pore last e aisha aste aste hbe
        */
      }
      #box6:hover {
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        transition-duration: 4s;
        transition-timing-function: linear;
        /*
        transition-timing-function: linear;
        set korle eta normally jebhabe effect dito,
        oibhabei effect dibe
        */
      }
      #box7:hover {
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        transition-duration: 4s;
        transition-timing-function: steps(6);
        /*
        ekhane transition effect ta step by step porbe
        ekhane 6 step e transition effect ta dekha dibe
        and ei 6 ta step ghotte mot 4 sec lagbe
        */
      }
      #box8:hover {
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        transition-delay: 1s;
        /*
        ekhane oi element e hover korar 1s por ei transition ta dekha dibe
        */
      }

      /*Transition shorthand*/
      /*
      structure of transition shorthand
      transition: property name | duration | timing-function | delay
      */
      #box9:hover {
        background-color: blue;
        height: 70px;
        width: 70px;
        transition: all 2s ease-in 1s;
      }
    </style>
  </head>
  <body>
    <div id="box1">box1</div>
    <br />
    <div id="box2">box2</div>
    <br />
    <div id="box3">box3</div>
    <br />
    <div id="box4">box4</div>
    <br />
    <div id="box5">box5</div>
    <br />
    <div id="box6">box6</div>
    <br />
    <div id="box7">box7</div>
    <br />
    <div id="box8">box8</div>
    <br />
    <div id="box9">box9</div>
  </body>
</html>