├── .DS_Store
├── Ani_Ball
├── .DS_Store
├── bs.txt
├── css
│ └── st.css
├── index.html
└── js
│ └── script.js
├── Color_TextDec
├── .DS_Store
├── bs.txt
├── css
│ └── st.css
├── index.html
└── js
│ └── script.js
├── Dispaly_Block_Appearence
├── .DS_Store
├── bs.txt
├── css
│ └── st.css
├── index.html
└── js
│ └── script.js
└── Louding_Ani
├── .DS_Store
├── bs.txt
├── css
└── st.css
├── index.html
└── js
└── script.js
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/.DS_Store
--------------------------------------------------------------------------------
/Ani_Ball/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Ani_Ball/.DS_Store
--------------------------------------------------------------------------------
/Ani_Ball/bs.txt:
--------------------------------------------------------------------------------
1 | browser-sync start --server --files "css/*.css, *html, js/*.js"
2 |
--------------------------------------------------------------------------------
/Ani_Ball/css/st.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
2 | body{
3 | min-width: 320px;
4 | font-size: 16px;
5 | line-height: 1.65;
6 | font-family: "Roboto" sans-serif;
7 | overflow-x: hidden;
8 | background-color: white;
9 | }
10 |
11 |
12 | .wrapper{
13 | position: relative;
14 | width: 100%;
15 | height: 50px;
16 | }
17 | .ball{
18 | position: absolute;
19 | background-color: blue;
20 | height: 50px;
21 | width: 50px;
22 | border-radius: 50%;
23 | animation: ball 0.1s ease-in-out infinite;
24 | }
25 |
26 |
27 | /* @keyframes ball_animation {
28 | 0%{
29 | left: 0;
30 | box-shadow: 0 0 0 rgb(32, 32, 32);
31 | }
32 | 5%{
33 | left: 0;
34 | transform-origin: 0 0;
35 | transform: scaleX(0.82);
36 | }
37 | 25%{
38 | box-shadow: -18 0 13px -8px rgb(32, 32, 32);
39 | transform: scaleX(1.05) skewX(-3deg);
40 | }
41 | 50%{
42 | left: 100%;
43 | box-shadow: 0 0 0 rgb(32, 32, 32);
44 | transform: scaleX(1) skewX(0deg);
45 | }
46 | 55%{
47 | left: 100%;
48 | transform-origin: 100% 0;
49 | box-shadow: 0 0 0 rgb(32, 32, 32);
50 | transform: scaleX(0,9);
51 | }
52 | 75%{
53 | box-shadow: -18 0 13px -8px rgb(32, 32, 32);
54 | transform: scaleX(1.05) skewX(-3deg);
55 | }
56 | 100%{
57 | left: 0;
58 | box-shadow: 0 0 0 rgb(32, 32, 32);
59 | transform: scaleX(1) skewX(0deg);
60 | }
61 | } */
62 | @keyframes ball {
63 | 0%{
64 | left: 0;
65 | }
66 | 100%{
67 | left: 50px;
68 | }
69 | }
70 | /* ada */
71 |
--------------------------------------------------------------------------------
/Ani_Ball/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Ani_Ball/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Ani_Ball/js/script.js
--------------------------------------------------------------------------------
/Color_TextDec/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Color_TextDec/.DS_Store
--------------------------------------------------------------------------------
/Color_TextDec/bs.txt:
--------------------------------------------------------------------------------
1 | browser-sync start --server --files "css/*.css, *html, js/*.js"
2 |
--------------------------------------------------------------------------------
/Color_TextDec/css/st.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
2 | body{
3 | min-width: 320px;
4 | font-size: 16px;
5 | line-height: 1.65;
6 | font-family: "Roboto" sans-serif;
7 | overflow-x: hidden;
8 | background-color: #ffff;
9 | }
10 | /*
11 | 1 Гарний width hover
12 | 2 Плавний перехід коліру
13 | */
14 |
15 | header{
16 | width: 100%;
17 | padding: 10px;
18 | background-color: rgb(179, 219, 255);
19 | }
20 | ul{
21 | list-style-type: none;
22 | padding: 0;
23 | }
24 | li{
25 | display: inline-block;
26 | margin: 0 10px;
27 | }
28 | a{
29 | text-decoration: none;
30 | color: rgb(255, 255, 255);
31 | display: block;
32 | /* Робить плавний перехід за 4 мілісекунди */
33 | transition: color .4s ease-in-out;
34 | position: relative;
35 | }
36 | a::after{
37 | content: '';
38 | width: 0;
39 | position: absolute;
40 | left: 0;
41 | right: 0;
42 | bottom: -1px;
43 | height: 1px;
44 | background-color: #fff;
45 | transition: width 0.4s ease-in-out;
46 | }
47 | a:hover{
48 | color: rgb(185, 96, 129);
49 | }
50 | a:hover::after{
51 | width: 100%;
52 | }
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | /* ada */
61 |
--------------------------------------------------------------------------------
/Color_TextDec/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Color_TextDec/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Color_TextDec/js/script.js
--------------------------------------------------------------------------------
/Dispaly_Block_Appearence/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Dispaly_Block_Appearence/.DS_Store
--------------------------------------------------------------------------------
/Dispaly_Block_Appearence/bs.txt:
--------------------------------------------------------------------------------
1 | browser-sync start --server --files "css/*.css, *html, js/*.js"
2 |
--------------------------------------------------------------------------------
/Dispaly_Block_Appearence/css/st.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
2 | body{
3 | min-width: 320px;
4 | font-size: 16px;
5 | line-height: 1.65;
6 | font-family: "Roboto" sans-serif;
7 | overflow-x: hidden;
8 | background-color: black;
9 | color: white;
10 | }
11 | /*
12 | Плавне появлення блоку
13 | Створення @keyframes
14 | */
15 | .block{
16 | width: 150px;
17 | height: 150px;
18 | background-color: #222;
19 | margin: 10px auto;
20 | align-items: center;
21 | justify-content: center;
22 | display: none;
23 | animation: opac 0.5s;
24 | }
25 | .hover-me{
26 | cursor: pointer;
27 | text-align: center;
28 | }
29 | .hover-me:hover + .block{
30 | display: flex;
31 | }
32 | @keyframes opac {
33 | from{
34 | opacity: 0;
35 | }
36 | to{
37 | opacity: 1;
38 | }
39 | }
40 |
41 |
42 |
43 |
44 | /* ada */
45 |
--------------------------------------------------------------------------------
/Dispaly_Block_Appearence/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 | Hover me!
11 | Content
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Dispaly_Block_Appearence/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Dispaly_Block_Appearence/js/script.js
--------------------------------------------------------------------------------
/Louding_Ani/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaplunMaxym/HTML_Animations/c2182245649b677f2d0fea0dff6d1d37e7885f64/Louding_Ani/.DS_Store
--------------------------------------------------------------------------------
/Louding_Ani/bs.txt:
--------------------------------------------------------------------------------
1 | browser-sync start --server --files "css/*.css, *html, js/*.js"
2 |
--------------------------------------------------------------------------------
/Louding_Ani/css/st.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
2 | body{
3 | min-width: 320px;
4 | font-size: 16px;
5 | line-height: 1.65;
6 | font-family: "Roboto" sans-serif;
7 | overflow-x: hidden;
8 | background-color: rgba(49,49,49,1);
9 | padding: 0;
10 | }
11 | .other_div{
12 | height: 100%;
13 | width: 100%;
14 | display: flex;
15 | flex-direction: row;
16 | justify-content: center;
17 | }
18 | .other_div2{
19 | position: fixed;
20 | height: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | justify-content: center;
24 | }
25 | .louding{
26 | height: 700px;
27 | width: 700px;
28 | border-radius: 40px;
29 |
30 | background:rgba(82,82,82,1);
31 | animation: log_ani_1 1s ease;
32 | display: flex;
33 | flex-direction: column;
34 | justify-content: center;
35 | align-items: center;
36 | }
37 | .info{
38 | width: 80%;
39 | height: 150px;
40 |
41 | animation: log_ani_2 1s ease;
42 | background-color: rgba(65,65,65,1);
43 | border-radius: 40px;
44 | margin-bottom: 40px;
45 | }
46 | .confirn{
47 | width: 50%;
48 | height: 100px;
49 |
50 | animation: log_ani_3 1s ease;
51 | background-color: #ca3e47;
52 | border-radius: 40px;
53 | margin-bottom: 40px;
54 | }
55 | @keyframes log_ani_1 {
56 | 0%{
57 | height: 0px;
58 | width: 0px;
59 | }
60 | 50%{
61 | height: 700px;
62 | width: 700px;
63 | }
64 | }
65 | @keyframes log_ani_2 {
66 | 0%{
67 | width: 0px;
68 | }
69 | 50%{
70 | width: 0px;
71 | border-radius: 0;
72 | }
73 | 100%{
74 | width: 80%;
75 | border-radius: 40px;
76 | }
77 | }
78 | @keyframes log_ani_3 {
79 | 0%{
80 | width: 0px;
81 | }
82 | 50%{
83 | width: 0px;
84 | border-radius: 0;
85 | }
86 | 100%{
87 | width: 50%;
88 | border-radius: 40px;
89 | }
90 | }
91 |
92 |
93 |
94 | /* ada */
95 |
--------------------------------------------------------------------------------
/Louding_Ani/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |