CSS-Note/Animation 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
/* Animation 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>
    /*
    accha ekta jinish notice korlam ta holo je,
    animation add webpage e show koraite hoile
    index.html file ta ke save korte hoy
    echara animation webpage e ashe na
    only style.css file ke save korlei hoy na,
    reason behind it ami ekhono jani na eta
    */
      div {
        height: 70px;
        width: 70px;
        border: 2px solid black;
      }
      @keyframes colorAnimate {
        from {
          background-color: aqua;
        }
        to {
          background-color: blue;
        }
        /*
        keyframe diye muloto ekta template type banano hoy
        it's more like e "function" concept from JS
        eikhane ei keyframe'r name dewa hoise colorAnimate
        eta ke jekhane call kora hbe
        ba jei element'r khetre call kora hbe
        shei element e eta tar kaj korbe
        */

        /*
        ei keyframe ta ke call kora hole she,
        oi element tar background-color aqua theke blue te niye jabe
        */
      }
      @keyframes positionChange {
        from {
          transform: translateX(0px);
        }
        to {
          transform: translateX(100px);
        }
      }
      #box1 {
        animation-name: colorAnimate; /*ei line e colorAnimate name'r keyframe ta ke call kora hoise*/
        animation-duration: 2s;
      }
      #box2 {
        animation-name: colorAnimate; /*ei line e colorAnimate name'r keyframe ta ke call kora hoise*/
        animation-duration: 2s;
        animation-iteration-count: 3;
        /*
        animation-iteration-count diye muloto fix kora hoy je
        oi animation koybar hbe
        ekhane 3 set kora, so oi box e 3 times animation ta dekha dibe
        */
      }
      #box3 {
        animation-name: colorAnimate;
        animation-duration: 2s;
        animation-delay: 2s;
      }
      #box4:hover {
        animation-name: colorAnimate;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-iteration-count: 3;
        /*
        ebhabe ei "hover" o apply kora jay
        */
      }
      #box5 {
        animation-name: colorAnimate;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-timing-function: ease-in;
      }
      #box6 {
        animation-name: colorAnimate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        /*
        animation-direction muloto ja bujha ta hocche
        eta 'from' theke 'to' er dike jabe
        naki 'to' theke 'from' er dike jabe ta nirdesh kore.

        ekhane animation-drection normal dewa te ekhane animation ta 'from' theke 'to' te gese,
        jeta normally houar kotha
        */
      }
      #box7 {
        animation-name: colorAnimate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: reverse;
        /*
        animation-direction: reverse; hocche
        exactly animation-direction: normal; er opposit
        */
      }
      #box8 {
        animation-name: positionChange;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        /*
        animation-direction: alternate;
        set kora te prothome 'from' theke 'to' te jaache
        er por abar 'to' theke 'from' e jacche
        */
      }
      #box9 {
        animation-name: positionChange;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        /*
        eta exactly animation-direction: alternate; er ulta ta
        */
      }

      /*Animation Shorthand*/
      /*
      animation shorthand'r structure
      animation: keyframeName | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
      */
      #box10 {
        animation: positionChange 1.5s ease-in 1s infinite alternate;
      }

      /*% in animation*/
      /*
      keyframes e amra jei 'from' 'to' lekhi,
      sekhane from ta hocche 0% mane shei animation time'r 0% time matro oita show korbe,
      mane ekdom start e oi set kora animation ta show korbe

      ar to hocche 100%,
      mane ekdom last e oi animation ta show korbe
      ekhn ami jodi 50% diye kono animation dei
      tahole shei animation ta majhe show korbe
      */
      @keyframes bgColorChange {
        0% {
          background-color: rgb(140, 5, 140);
        }
        50% {
          background-color: blue;
        }
        100% {
          background-color: rgb(67, 248, 236);
        }
      }
      #box11 {
        animation: bgColorChange 6s infinite;
      }
    </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>
    <br />
    <div id="box10">box10</div>
    <br />
    <div id="box11">box11</div>
  </body>
</html>