In the html code below
<div class="main_page" id="main_page">
When I try to add any effect to the named div, the effect does not work and the div content comes directly to the screen.
To solve this problem, I defined keyframe in my css code:
@keyframes vacuum-effect {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#main_page {
animation: vacuum-effect 1s ease-out; /* 1 saniyede açılma efekti */
/* Diğer stillendirmeler buraya gelecek */
}
but this keyframe did not work and directly brought this div to the screen without playing any animation after a while.
**An important point is that there are
The animation I put in the div named Tablet_Main_Page is playing properly. **
@keyframes vacuum-effect {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#main_page {
animation: vacuum-effect 1s ease-out;
/* 1 saniyede açılma efekti */
/* Diğer stillendirmeler buraya gelecek */
}<div id="Tablet_Main_Page" class="Tablet_Main_Page">
<img class="tablet_bg" src="img/tablet_bg.svg">
<div class="header">
<svg class="header_icon" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
<path d="M9.39126 2.75011C9.31877 2.57776 9.17006 2.41847 8.9498 2.27691L8.92989 2.26478C8.9218 2.2598 8.91355 2.25467 8.90531 2.24969L8.91433 2.24643L8.75473 2.16787C8.75442 2.16771 8.75426 2.16756 8.75395 2.1674C8.74431 2.16274 8.73466 2.15807 8.72517 2.1534C8.72471 2.15325 8.7244 2.15309 8.72409 2.15278C8.40971 2.00298 8.01397 1.89472 7.57593 1.83856C7.56629 1.83732 7.55664 1.83623 7.54715 1.83498C7.48897 1.82736 7.42893 1.82083 7.36764 1.81492C7.02589 1.78427 6.65489 1.78443 6.2912 1.81818C6.23022 1.82425 6.17017 1.83078 6.11153 1.83918C5.66695 1.89674 5.2678 2.00749 4.95404 2.15994L4.95389 2.15978L4.9332 2.17036C4.93024 2.17192 4.92697 2.17331 4.92402 2.17487C4.92091 2.17643 4.9178 2.17798 4.91484 2.17954L4.7666 2.2542L4.77515 2.25732C4.75975 2.2668 4.74482 2.27629 4.72989 2.28594C4.51989 2.42189 4.37615 2.57729 4.30304 2.74747C4.28717 2.78387 4.27489 2.82058 4.26602 2.85885L4.26244 2.85869L4.2542 2.92527C4.25404 2.92683 4.25373 2.92838 4.25357 2.92994V2.93025C4.25342 2.93165 4.25326 2.93274 4.25311 2.93414L4.24377 3.0116L4.24984 3.01191C4.25326 3.19874 4.34193 3.37918 4.50806 3.54065L4.49951 3.54314L4.61306 3.6318C4.61431 3.63289 4.6154 3.63383 4.61664 3.6346L4.6168 3.63476C4.61773 3.63554 4.61866 3.63616 4.61944 3.63694L4.64806 3.65918L4.64869 3.65887C4.69271 3.69138 4.74295 3.72452 4.80113 3.75967C5.05811 3.90947 5.39364 4.02925 5.77086 4.10578C5.83464 4.11931 5.90044 4.13098 5.96624 4.14094C6.24453 4.18589 6.54055 4.20876 6.84653 4.20876C7.1368 4.20876 7.42053 4.18791 7.68949 4.14685C7.75653 4.13689 7.82264 4.12523 7.8872 4.11278C8.29055 4.03438 8.6432 3.90916 8.90702 3.75065C8.97515 3.70927 9.03442 3.66836 9.08855 3.62527C9.32064 3.44171 9.44337 3.22565 9.44337 3.00056C9.44337 2.97754 9.44244 2.95545 9.43964 2.93414C9.43342 2.87316 9.41709 2.8114 9.39126 2.75011ZM8.80093 3.4414C8.74617 3.47749 8.68209 3.51343 8.61037 3.54843C8.37315 3.66463 8.06717 3.75734 7.72464 3.8166C7.6618 3.8278 7.59755 3.83745 7.53144 3.84569C7.07597 3.90636 6.574 3.90449 6.12553 3.84072C6.0602 3.83185 5.99657 3.82205 5.93295 3.80991C5.61655 3.75298 5.32815 3.66494 5.09793 3.55511C5.03337 3.52494 4.97364 3.49274 4.92075 3.45945L4.88653 3.43736C4.7372 3.33874 4.56795 3.18614 4.56795 3.0004C4.56795 2.99496 4.56811 2.98983 4.56826 2.98469L4.57869 2.92045C4.58646 2.88934 4.59953 2.85823 4.61804 2.82618C4.68446 2.70936 4.81902 2.59378 5.00724 2.49236C5.06837 2.45938 5.13464 2.42796 5.20402 2.39872L5.21289 2.39498C5.47982 2.28376 5.80866 2.20085 6.16691 2.15449V2.15465L6.27424 2.14143C6.3136 2.13707 6.35326 2.13318 6.39293 2.12945C6.67775 2.1058 6.97455 2.10456 7.26482 2.12696C7.32144 2.13163 7.37822 2.13707 7.442 2.1436L7.44184 2.14407C7.81486 2.18576 8.16253 2.26774 8.44906 2.38176L8.46882 2.38969L8.46913 2.38985C8.54022 2.41847 8.6082 2.4502 8.67166 2.48443C8.86829 2.58865 9.00797 2.70734 9.07626 2.82836C9.10162 2.87254 9.11717 2.91718 9.12277 2.96385C9.12464 2.97567 9.12511 2.98811 9.12511 3.00071C9.12511 3.19034 8.94902 3.3448 8.80093 3.4414Z" fill="white"/>
<path d="M13.9815 5.00624C13.9661 4.90311 13.9384 4.80309 13.9 4.70322C13.8354 4.53553 13.7385 4.37313 13.6153 4.21664V3.00004C13.6153 2.9246 13.6091 2.84931 13.5968 2.77542C13.5814 2.67229 13.5537 2.57227 13.5153 2.4724C13.3306 1.99236 12.8952 1.554 12.2691 1.18316C12.1553 1.11704 12.0353 1.05078 11.9092 0.989333C11.0522 0.564667 9.91838 0.250911 8.62151 0.100022C8.51231 0.0877334 8.40156 0.0754445 8.28924 0.0661111C7.82616 0.0230222 7.34316 0 6.84616 0C6.32613 0 5.82151 0.0245778 5.33851 0.0723334C5.2262 0.0830667 5.117 0.0938001 5.0078 0.1078H5.00624C3.72167 0.2632 2.60167 0.578511 1.75544 1.00318C1.62929 1.06633 1.51091 1.13089 1.39704 1.19856C0.786333 1.56473 0.361667 1.99547 0.178578 2.46773C0.140156 2.56776 0.112467 2.66778 0.0970667 2.77076C0.0832222 2.8462 0.077 2.92304 0.077 3.00004V4.38464C0.077 4.74164 0.213889 5.08169 0.461689 5.39684V6.12407C0.302089 6.30716 0.179044 6.49896 0.101733 6.69853C0.0633111 6.79856 0.0356222 6.89858 0.0202222 7.00156C0.00622224 7.077 0 7.154 0 7.23084V8.61544C0 9.67089 1.17227 10.5831 2.98464 11.1169C3.09384 11.1493 3.20304 11.1799 3.31691 11.2092H3.31847C3.58462 11.2784 3.86307 11.3384 4.1538 11.3907C4.25538 11.4092 4.35696 11.426 4.46149 11.443C5.17844 11.5553 5.95529 11.6153 6.76916 11.6153C7.53527 11.6153 8.26918 11.5615 8.95067 11.4615C9.04447 11.4476 9.13842 11.4338 9.23067 11.4168C9.55376 11.363 9.863 11.2985 10.1584 11.2246C10.2723 11.1953 10.3846 11.1661 10.4938 11.1339H10.4953C11.1585 10.9432 11.7368 10.7032 12.2077 10.4232C12.2693 10.3863 12.3276 10.3493 12.3846 10.3108C13.1154 9.83235 13.5385 9.25089 13.5385 8.61544V7.72442C13.8368 7.38329 14 7.0098 14 6.61547V5.23087C14 5.15558 13.9938 5.08013 13.9815 5.00624ZM0.329156 7.02007C0.347667 6.91849 0.382978 6.81691 0.430733 6.7186C0.440533 6.69838 0.4536 6.67847 0.464489 6.65824C0.464022 6.64393 0.461533 6.62978 0.461533 6.61547C0.461533 6.75687 0.484089 6.89531 0.524844 7.03095L0.329156 7.02007ZM4.46149 11.1232C4.35836 11.1062 4.25538 11.0878 4.1538 11.0678C3.9522 11.0309 3.75527 10.9878 3.56456 10.9401C3.44913 10.9139 3.33838 10.8831 3.22762 10.8523H3.22607C2.55376 10.6646 1.96762 10.4261 1.49987 10.1523C1.39067 10.0878 1.28753 10.0215 1.19218 9.95229V8.95222C1.23682 8.98147 1.28147 9.00916 1.32751 9.03684C1.38289 9.0692 1.44138 9.1014 1.49987 9.13375C2.16907 9.49993 3.03224 9.79222 4.02749 9.98293C4.06902 9.99055 4.11056 9.99833 4.15364 10.006C4.23064 10.0198 4.30749 10.0336 4.38744 10.0459C4.41047 10.0506 4.4352 10.0536 4.46133 10.0582L4.46149 11.1232ZM1.57687 5.92169C1.46767 5.85713 1.36453 5.79087 1.26918 5.72164V4.72158C1.31382 4.75082 1.35847 4.77851 1.40451 4.8062C1.45989 4.83856 1.51838 4.87076 1.57687 4.90311C2.24607 5.26929 3.10924 5.56158 4.10449 5.75229C4.14602 5.75991 4.18756 5.76769 4.23064 5.77531C4.30764 5.78916 4.38449 5.803 4.46444 5.81529C4.48747 5.81996 4.5122 5.82291 4.53833 5.82758V6.8922C4.4352 6.87524 4.33222 6.85689 4.23064 6.83682C4.02904 6.79996 3.83211 6.75687 3.6414 6.70911C3.52598 6.68298 3.41522 6.65218 3.30447 6.62138H3.30291C2.63076 6.43393 2.04462 6.19547 1.57687 5.92169ZM1.7892 7.03702C1.84458 7.06938 1.90307 7.10158 1.96156 7.13393C2.63076 7.50011 3.49393 7.7924 4.48918 7.98311C4.53071 7.99073 4.57224 7.99851 4.61533 8.00613C4.69233 8.01998 4.76918 8.03382 4.84913 8.04611C4.87216 8.05078 4.89689 8.05373 4.92302 8.0584V9.12302C4.81989 9.10607 4.71691 9.08771 4.61533 9.06764C4.41373 9.03078 4.2168 8.98769 4.02609 8.93993C3.91067 8.9138 3.79991 8.883 3.68916 8.8522H3.6876C3.01529 8.66444 2.42916 8.42598 1.9614 8.1522C1.8522 8.08764 1.74907 8.02138 1.65371 7.95216V6.95209C1.69851 6.98164 1.74316 7.00933 1.7892 7.03702ZM4.9406 9.44564L4.64473 9.76795C4.52169 9.74944 4.40004 9.72953 4.28167 9.70791H4.28011C3.29389 9.53104 2.4262 9.2526 1.75544 8.90789C1.62307 8.84022 1.50002 8.76944 1.38476 8.69711L1.96684 8.52118C2.38871 8.75124 2.88664 8.95238 3.44618 9.11711C3.55538 9.14947 3.66458 9.18011 3.77844 9.20935H3.78C4.04616 9.27858 4.3246 9.33862 4.61533 9.39089C4.71691 9.4094 4.81849 9.4262 4.92302 9.44316C4.92893 9.44409 4.93516 9.44471 4.94107 9.44564C4.94091 9.44564 4.94076 9.44564 4.9406 9.44564ZM5.10611 7.76782C4.98307 7.74931 4.86142 7.7294 4.74304 7.70778H4.74149C3.75527 7.53091 2.88758 7.25247 2.21682 6.90775C2.08444 6.84009 1.9614 6.76931 1.84613 6.69698L2.21044 6.58684C2.4752 6.6962 2.75847 6.79684 3.06164 6.88613C3.17084 6.91849 3.28004 6.94913 3.39391 6.97838H3.39547C3.66162 7.0476 3.94007 7.10764 4.2308 7.15991C4.33238 7.17842 4.43396 7.19522 4.53849 7.21218C4.85131 7.26118 5.17736 7.2982 5.51102 7.32667L5.10611 7.76782ZM8.61918 9.55235C8.88953 9.52824 9.15569 9.49947 9.41236 9.46167C9.50616 9.44782 9.60011 9.43398 9.69236 9.41702C10.0154 9.3632 10.3247 9.29864 10.6201 9.22476C10.734 9.19551 10.8463 9.16627 10.9555 9.13407H10.957C11.4058 9.00496 11.8148 8.85282 12.1789 8.6814L12.1802 8.68171C12.0647 8.75404 11.9417 8.82482 11.8109 8.89249C11.1216 9.25244 10.2186 9.54022 9.1924 9.71864C9.07247 9.74011 8.94927 9.76018 8.82622 9.77713L8.61918 9.55235ZM9.02767 7.23084C9.12147 7.217 9.21542 7.20316 9.30767 7.1862C9.63076 7.13238 9.94 7.06782 10.2354 6.99393C10.3493 6.96469 10.4616 6.93544 10.5708 6.90324H10.5723C11.0345 6.77024 11.4545 6.61282 11.8266 6.43518C11.8266 6.43518 11.8264 6.43518 11.8264 6.43533L12.6415 6.68173C12.5261 6.75407 12.4031 6.82484 12.2722 6.89251C11.583 7.25247 10.68 7.54024 9.65378 7.71867C9.53384 7.74013 9.41064 7.7602 9.2876 7.77716L8.81005 7.25869C8.88253 7.2492 8.95658 7.24127 9.02767 7.23084ZM8.99998 6.91709V5.85091C9.0538 5.84329 9.10918 5.83396 9.16144 5.82633C9.2106 5.81871 9.25991 5.81093 9.30767 5.80175C9.38 5.79102 9.45233 5.77718 9.52311 5.76489H9.52467C10.5663 5.57107 11.4646 5.26649 12.1539 4.88336C12.2092 4.85256 12.2615 4.82176 12.3139 4.79111C12.3646 4.75876 12.414 4.72796 12.4616 4.69576V5.69427C12.3662 5.76504 12.2631 5.83271 12.1539 5.89882C11.6662 6.19111 11.043 6.44342 10.3276 6.6388C10.2169 6.6696 10.103 6.69884 9.9876 6.72498C9.7692 6.7788 9.54147 6.825 9.30767 6.86653C9.20609 6.88473 9.10467 6.90169 8.99998 6.91709ZM12.3846 9.92476C12.2892 9.99553 12.1861 10.0632 12.0769 10.1293C11.5892 10.4216 10.966 10.6739 10.2506 10.8693C10.1399 10.9001 10.026 10.9293 9.9106 10.9555C9.6922 11.0093 9.46447 11.0555 9.23067 11.097C9.12909 11.1155 9.02751 11.1323 8.92298 11.1477V10.0816C8.9768 10.0739 9.03218 10.0646 9.08444 10.057C9.1336 10.0494 9.18291 10.0416 9.23067 10.0324C9.303 10.0217 9.37533 10.0078 9.44611 9.99553H9.44767C10.4893 9.80171 11.3876 9.49713 12.0769 9.114C12.1322 9.0832 12.1845 9.0524 12.2369 9.02176C12.2876 8.9894 12.337 8.9586 12.3846 8.9264V9.92476ZM12.8461 7.92478C12.7507 7.99555 12.6476 8.06322 12.5384 8.12933C12.0507 8.42162 11.4276 8.67393 10.7122 8.86931C10.6014 8.90011 10.4876 8.92935 10.3721 8.95549C10.1537 9.00931 9.926 9.05551 9.6922 9.09704C9.59062 9.11555 9.48905 9.13235 9.38451 9.14775V8.08158C9.43833 8.07395 9.49371 8.06462 9.54598 8.057C9.59513 8.04938 9.64444 8.0416 9.6922 8.03242C9.76453 8.02169 9.83687 8.00784 9.90765 7.99556H9.9092C10.9508 7.80173 11.8491 7.49716 12.5384 7.11402C12.5938 7.08322 12.646 7.05242 12.6985 7.02178C12.7492 6.98942 12.7985 6.95862 12.8461 6.92642V7.92478ZM11.5523 2.89084C11.557 2.92771 11.5586 2.96318 11.5586 3.00004C11.5586 3.38613 11.3386 3.7478 10.9492 4.05549L12.257 4.45091C12.1416 4.52324 12.0185 4.59402 11.8877 4.66169C11.1984 5.02164 10.2954 5.30942 9.26924 5.48784C9.14931 5.50931 9.02611 5.52938 8.90307 5.54633L8.40156 5.00173C7.917 5.07562 7.39387 5.1156 6.84616 5.1156C6.27387 5.1156 5.72771 5.07251 5.22309 4.991L4.72158 5.53716C4.59853 5.51864 4.47689 5.49873 4.35851 5.47711H4.35696C3.37073 5.30024 2.50304 5.0218 1.83229 4.67709C1.69991 4.60942 1.57687 4.53864 1.4616 4.46631L2.76469 4.07244C2.3632 3.76009 2.13391 3.39251 2.13391 3.0002C2.13391 2.96178 2.13547 2.92476 2.14013 2.88633L0.406156 2.78942C0.424667 2.68784 0.459978 2.58627 0.507733 2.48796C0.710889 2.0664 1.16153 1.67564 1.7892 1.34649H1.79076C1.91224 1.28193 2.03996 1.22033 2.17544 1.16029L3.31551 1.58496C3.88624 1.29733 4.63556 1.08189 5.49096 0.971133L5.17253 0.403511C5.28173 0.391222 5.39249 0.378933 5.5048 0.3696H5.50636C5.9402 0.329622 6.38789 0.308 6.84631 0.308C7.28171 0.308 7.70933 0.326511 8.12327 0.363378C8.23558 0.372556 8.34633 0.383445 8.45709 0.395733L8.13867 0.963356C9.00636 1.06944 9.7664 1.28333 10.3494 1.57111L11.4864 1.14644C11.6217 1.20649 11.751 1.26793 11.874 1.33109C12.5186 1.66491 12.9802 2.06189 13.1863 2.49107C13.234 2.58953 13.2678 2.69111 13.2879 2.79253L11.5523 2.89084ZM13.4613 5.03518C13.5097 4.93469 13.5476 4.83218 13.5733 4.7278C13.6195 4.8244 13.6528 4.9238 13.6724 5.0232L13.4613 5.03518Z" fill="white"/>
</svg>
<span class="header_lbl">777Hub</span>
<span class="header_main_btn" id="header_main_btn">Main</span>
<span class="header_withdraw_btn" id="header_withdraw_btn">Withdraw</span>
<span class="header_profile_btn" id="header_profile_btn">Profile</span>
<span class="header_settings_btn" id="header_settings_btn">Settings</span>
<svg class="header_sebeke_icon" xmlns="http://www.w3.org/2000/svg" width="17" height="10" viewBox="0 0 17 10" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5761 0.617317C13.5 0.801088 13.5 1.03406 13.5 1.5V8.5C13.5 8.96594 13.5 9.19891 13.5761 9.38268C13.6776 9.62771 13.8723 9.82239 14.1173 9.92388C14.3011 10 14.5341 10 15 10C15.4659 10 15.6989 10 15.8827 9.92388C16.1277 9.82239 16.3224 9.62771 16.4239 9.38268C16.5 9.19891 16.5 8.96594 16.5 8.5V1.5C16.5 1.03406 16.5 0.801088 16.4239 0.617317C16.3224 0.372288 16.1277 0.177614 15.8827 0.0761205C15.6989 0 15.4659 0 15 0C14.5341 0 14.3011 0 14.1173 0.0761205C13.8723 0.177614 13.6776 0.372288 13.5761 0.617317ZM9 3.5C9 3.03406 9 2.80109 9.07612 2.61732C9.17761 2.37229 9.37229 2.17761 9.61732 2.07612C9.80109 2 10.0341 2 10.5 2C10.9659 2 11.1989 2 11.3827 2.07612C11.6277 2.17761 11.8224 2.37229 11.9239 2.61732C12 2.80109 12 3.03406 12 3.5V8.5C12 8.96594 12 9.19891 11.9239 9.38268C11.8224 9.62771 11.6277 9.82239 11.3827 9.92388C11.1989 10 10.9659 10 10.5 10C10.0341 10 9.80109 10 9.61732 9.92388C9.37229 9.82239 9.17761 9.62771 9.07612 9.38268C9 9.19891 9 8.96594 9 8.5V3.5ZM4.57612 4.61732C4.5 4.80109 4.5 5.03406 4.5 5.5V8.5C4.5 8.96594 4.5 9.19891 4.57612 9.38268C4.67761 9.62771 4.87229 9.82239 5.11732 9.92388C5.30109 10 5.53406 10 6 10C6.46594 10 6.69891 10 6.88268 9.92388C7.12771 9.82239 7.32239 9.62771 7.42388 9.38268C7.5 9.19891 7.5 8.96594 7.5 8.5V5.5C7.5 5.03406 7.5 4.80109 7.42388 4.61732C7.32239 4.37229 7.12771 4.17761 6.88268 4.07612C6.69891 4 6.46594 4 6 4C5.53406 4 5.30109 4 5.11732 4.07612C4.87229 4.17761 4.67761 4.37229 4.57612 4.61732ZM0.0761205 6.11732C0 6.30109 0 6.53406 0 7V8.5C0 8.96594 0 9.19891 0.0761205 9.38268C0.177614 9.62771 0.372288 9.82239 0.617317 9.92388C0.801088 10 1.03406 10 1.5 10C1.96594 10 2.19891 10 2.38268 9.92388C2.62771 9.82239 2.82239 9.62771 2.92388 9.38268C3 9.19891 3 8.96594 3 8.5V7C3 6.53406 3 6.30109 2.92388 6.11732C2.82239 5.87229 2.62771 5.67761 2.38268 5.57612C2.19891 5.5 1.96594 5.5 1.5 5.5C1.03406 5.5 0.801088 5.5 0.617317 5.57612C0.372288 5.67761 0.177614 5.87229 0.0761205 6.11732Z" fill="white"/>
</svg>
<svg class="header_wifi_icon" xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 16 11" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4764 4.996C13.5899 5.1025 13.7649 5.103 13.8754 4.993L14.9394 3.929C15.0539 3.814 15.0544 3.6245 14.9364 3.513C13.1274 1.8005 10.6859 0.75 7.99837 0.75C5.31087 0.75 2.86937 1.8005 1.06037 3.513C0.94237 3.6245 0.94287 3.814 1.05737 3.929L2.12137 4.993C2.23187 5.103 2.40687 5.1025 2.52037 4.996C3.95487 3.6515 5.88187 2.827 7.99837 2.827C10.1149 2.827 12.0419 3.6515 13.4764 4.996ZM11.0295 7.44645C11.145 7.54945 11.3175 7.55045 11.427 7.44095L12.4895 6.37845C12.605 6.26295 12.6055 6.07045 12.4855 5.95995C11.3045 4.87445 9.72899 4.21145 7.99849 4.21145C6.26799 4.21145 4.69249 4.87445 3.51149 5.95995C3.39149 6.07045 3.39199 6.26295 3.50749 6.37845L4.56999 7.44095C4.67949 7.55045 4.85199 7.54945 4.96749 7.44645C5.77349 6.72695 6.83549 6.28845 7.99849 6.28845C9.16149 6.28845 10.2235 6.72695 11.0295 7.44645ZM10.0333 8.4111C10.1588 8.5161 10.1578 8.7116 10.0418 8.8276L8.20384 10.6656C8.09134 10.7781 7.90834 10.7781 7.79584 10.6656L5.95784 8.8276C5.84184 8.7116 5.84034 8.5161 5.96634 8.4111C6.51684 7.9506 7.22584 7.6731 7.99984 7.6731C8.77384 7.6731 9.48234 7.9506 10.0333 8.4111Z" fill="white"/>
</svg>
<span class="header_battery_level_lbl">100%</span>
<svg class="header_battery_icon" xmlns="http://www.w3.org/2000/svg" width="28" height="12" viewBox="0 0 28 12" fill="none">
<g opacity="0.4">
<mask id="path-1-inside-1_2201_45" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.17656 1H19.7766C20.7031 1 21.3379 1.00078 21.8297 1.04096C22.3098 1.08018 22.5649 1.15192 22.748 1.24524C23.1714 1.46095 23.5156 1.80516 23.7313 2.22852C23.8246 2.41166 23.8964 2.66673 23.9356 3.14684C23.9758 3.63862 23.9766 4.27341 23.9766 5.2V6.8C23.9766 7.72659 23.9758 8.36138 23.9356 8.85316C23.8964 9.33327 23.8246 9.58834 23.7313 9.77148C23.5156 10.1948 23.1714 10.539 22.748 10.7548C22.5649 10.8481 22.3098 10.9198 21.8297 10.959C21.3379 10.9992 20.7031 11 19.7766 11H6.17656C5.24998 11 4.61518 10.9992 4.1234 10.959C3.6433 10.9198 3.38822 10.8481 3.20508 10.7548C2.78172 10.539 2.43751 10.1948 2.2218 9.77148C2.12848 9.58834 2.05675 9.33327 2.01752 8.85316C1.97734 8.36138 1.97656 7.72659 1.97656 6.8V5.2C1.97656 4.27341 1.97734 3.63862 2.01752 3.14684C2.05675 2.66673 2.12848 2.41166 2.2218 2.22852C2.43751 1.80516 2.78172 1.46095 3.20508 1.24524C3.38822 1.15192 3.6433 1.08018 4.1234 1.04096C4.61518 1.00078 5.24998 1 6.17656 1ZM0.976562 5.2C0.976562 3.37983 0.976562 2.46974 1.33079 1.77453C1.64238 1.163 2.13957 0.665817 2.75109 0.354229C3.44631 0 4.35639 0 6.17656 0H19.7766C21.5967 0 22.5068 0 23.202 0.354229C23.8136 0.665817 24.3107 1.163 24.6223 1.77453C24.9766 2.46974 24.9766 3.37983 24.9766 5.2V6.8C24.9766 8.62017 24.9766 9.53026 24.6223 10.2255C24.3107 10.837 23.8136 11.3342 23.202 11.6458C22.5068 12 21.5967 12 19.7766 12H6.17656C4.35639 12 3.44631 12 2.75109 11.6458C2.13957 11.3342 1.64238 10.837 1.33079 10.2255C0.976562 9.53026 0.976562 8.62017 0.976562 6.8V5.2ZM27.4766 6C27.4766 5.06808 26.8392 4.28503 25.9766 4.06301V7.93699C26.8392 7.71497 27.4766 6.93192 27.4766 6Z"/>
</mask>
<path d="M21.8297 1.04096L21.7483 2.03764L21.8297 1.04096ZM22.748 1.24524L22.294 2.13624L22.2941 2.13624L22.748 1.24524ZM23.7313 2.22852L24.6223 1.77453L24.6223 1.77453L23.7313 2.22852ZM23.9356 3.14684L22.9389 3.22827V3.22827L23.9356 3.14684ZM23.9356 8.85316L22.9389 8.77173V8.77173L23.9356 8.85316ZM23.7313 9.77148L24.6223 10.2255L24.6223 10.2255L23.7313 9.77148ZM22.748 10.7548L22.2941 9.86376L22.294 9.86376L22.748 10.7548ZM21.8297 10.959L21.9112 11.9557L21.8297 10.959ZM4.1234 10.959L4.04197 11.9557L4.04197 11.9557L4.1234 10.959ZM3.20508 10.7548L3.65908 9.86376L3.65908 9.86376L3.20508 10.7548ZM2.2218 9.77148L1.33079 10.2255L1.33079 10.2255L2.2218 9.77148ZM2.01752 8.85316L3.0142 8.77173V8.77173L2.01752 8.85316ZM2.01752 3.14684L3.0142 3.22827L2.01752 3.14684ZM2.2218 2.22852L3.1128 2.68251L3.1128 2.68251L2.2218 2.22852ZM3.20508 1.24524L3.65907 2.13624L3.65907 2.13624L3.20508 1.24524ZM4.1234 1.04096L4.20483 2.03764H4.20483L4.1234 1.04096ZM1.33079 1.77453L2.2218 2.22852L1.33079 1.77453ZM2.75109 0.354229L3.20508 1.24524L2.75109 0.354229ZM23.202 0.354229L23.656 -0.536778V-0.536778L23.202 0.354229ZM24.6223 1.77453L23.7313 2.22852V2.22852L24.6223 1.77453ZM24.6223 10.2255L23.7313 9.77148L24.6223 10.2255ZM23.202 11.6458L22.748 10.7548L23.202 11.6458ZM2.75109 11.6458L3.20508 10.7548H3.20508L2.75109 11.6458ZM1.33079 10.2255L0.439785 10.6795L0.439785 10.6795L1.33079 10.2255ZM25.9766 4.06301L26.2258 3.09457L24.9766 2.77303V4.06301H25.9766ZM25.9766 7.93699H24.9766V9.22696L26.2258 8.90543L25.9766 7.93699ZM19.7766 0H6.17656V2H19.7766V0ZM21.9112 0.0442787C21.3691 -7.92929e-06 20.6862 0 19.7766 0V2C20.7201 2 21.3068 2.00156 21.7483 2.03764L21.9112 0.0442787ZM23.202 0.35423C22.8542 0.176994 22.4527 0.0885226 21.9112 0.0442786L21.7483 2.03764C22.167 2.07184 22.2756 2.12685 22.294 2.13624L23.202 0.35423ZM24.6223 1.77453C24.3107 1.163 23.8136 0.665817 23.202 0.354229L22.2941 2.13624C22.5293 2.25608 22.7205 2.44731 22.8403 2.68251L24.6223 1.77453ZM24.9323 3.06541C24.888 2.52388 24.7996 2.12237 24.6223 1.77453L22.8403 2.68251C22.8497 2.70095 22.9047 2.80959 22.9389 3.22827L24.9323 3.06541ZM24.9766 5.2C24.9766 4.29033 24.9766 3.60745 24.9323 3.06541L22.9389 3.22827C22.975 3.66978 22.9766 4.2565 22.9766 5.2H24.9766ZM24.9766 6.8V5.2H22.9766V6.8H24.9766ZM24.9323 8.93459C24.9766 8.39255 24.9766 7.70967 24.9766 6.8H22.9766C22.9766 7.7435 22.975 8.33022 22.9389 8.77173L24.9323 8.93459ZM24.6223 10.2255C24.7996 9.87763 24.888 9.47612 24.9323 8.93459L22.9389 8.77173C22.9047 9.19041 22.8497 9.29905 22.8403 9.31749L24.6223 10.2255ZM23.202 11.6458C23.8136 11.3342 24.3107 10.837 24.6223 10.2255L22.8403 9.31749C22.7205 9.55269 22.5293 9.74392 22.2941 9.86376L23.202 11.6458ZM21.9112 11.9557C22.4527 11.9115 22.8542 11.823 23.202 11.6458L22.294 9.86376C22.2756 9.87315 22.167 9.92815 21.7483 9.96236L21.9112 11.9557ZM19.7766 12C20.6862 12 21.3691 12 21.9112 11.9557L21.7483 9.96236C21.3068 9.99844 20.7201 10 19.7766 10V12ZM6.17656 12H19.7766V10H6.17656V12ZM4.04197 11.9557C4.58401 12 5.26689 12 6.17656 12V10C5.23306 10 4.64635 9.99844 4.20483 9.96236L4.04197 11.9557ZM2.75109 11.6458C3.09894 11.823 3.50045 11.9115 4.04197 11.9557L4.20483 9.96236C3.78615 9.92815 3.67751 9.87315 3.65908 9.86376L2.75109 11.6458ZM1.33079 10.2255C1.64238 10.837 2.13957 11.3342 2.75109 11.6458L3.65908 9.86376C3.42387 9.74392 3.23265 9.55269 3.1128 9.31749L1.33079 10.2255ZM1.02084 8.93459C1.06509 9.47612 1.15356 9.87763 1.33079 10.2255L3.1128 9.31749C3.10341 9.29905 3.04841 9.19041 3.0142 8.77173L1.02084 8.93459ZM0.976562 6.8C0.976562 7.70967 0.976555 8.39255 1.02084 8.93459L3.0142 8.77173C2.97813 8.33022 2.97656 7.7435 2.97656 6.8H0.976562ZM0.976562 5.2V6.8H2.97656V5.2H0.976562ZM1.02084 3.06541C0.976555 3.60745 0.976562 4.29033 0.976562 5.2H2.97656C2.97656 4.2565 2.97813 3.66978 3.0142 3.22827L1.02084 3.06541ZM1.33079 1.77453C1.15356 2.12237 1.06509 2.52388 1.02084 3.06541L3.0142 3.22827C3.04841 2.80959 3.10341 2.70095 3.1128 2.68251L1.33079 1.77453ZM2.75109 0.354229C2.13957 0.665817 1.64238 1.163 1.33079 1.77453L3.1128 2.68251C3.23265 2.44731 3.42387 2.25608 3.65907 2.13624L2.75109 0.354229ZM4.04197 0.0442786C3.50045 0.0885227 3.09894 0.176994 2.75109 0.354229L3.65907 2.13624C3.67751 2.12685 3.78615 2.07184 4.20483 2.03764L4.04197 0.0442786ZM6.17656 0C5.26689 0 4.58401 -7.92941e-06 4.04197 0.0442787L4.20483 2.03764C4.64635 2.00156 5.23306 2 6.17656 2V0ZM0.439785 1.32054C0.17887 1.83261 0.0734934 2.38019 0.0241622 2.98397C-0.0242152 3.57609 -0.0234375 4.30642 -0.0234375 5.2H1.97656C1.97656 4.27341 1.97734 3.63862 2.01752 3.14684C2.05675 2.66673 2.12848 2.41166 2.2218 2.22852L0.439785 1.32054ZM2.2971 -0.536778C1.49741 -0.129316 0.847247 0.520851 0.439785 1.32054L2.2218 2.22852C2.43751 1.80516 2.78172 1.46095 3.20508 1.24524L2.2971 -0.536778ZM6.17656 -1C5.28298 -1 4.55265 -1.00078 3.96054 -0.9524C3.35675 -0.903069 2.80918 -0.797693 2.2971 -0.536778L3.20508 1.24524C3.38822 1.15192 3.6433 1.08018 4.1234 1.04096C4.61518 1.00078 5.24998 1 6.17656 1V-1ZM19.7766 -1H6.17656V1H19.7766V-1ZM23.656 -0.536778C23.1439 -0.797693 22.5964 -0.903069 21.9926 -0.9524C21.4005 -1.00078 20.6701 -1 19.7766 -1V1C20.7031 1 21.3379 1.00078 21.8297 1.04096C22.3098 1.08018 22.5649 1.15192 22.748 1.24524L23.656 -0.536778ZM25.5133 1.32054C25.1059 0.520852 24.4557 -0.129316 23.656 -0.536778L22.748 1.24524C23.1714 1.46095 23.5156 1.80516 23.7313 2.22852L25.5133 1.32054ZM25.9766 5.2C25.9766 4.30642 25.9773 3.57609 25.929 2.98397C25.8796 2.38019 25.7743 1.83261 25.5133 1.32054L23.7313 2.22852C23.8246 2.41166 23.8964 2.66673 23.9356 3.14684C23.9758 3.63862 23.9766 4.27341 23.9766 5.2H25.9766ZM25.9766 6.8V5.2H23.9766V6.8H25.9766ZM25.5133 10.6795C25.7743 10.1674 25.8796 9.61981 25.929 9.01603C25.9773 8.42391 25.9766 7.69358 25.9766 6.8H23.9766C23.9766 7.72659 23.9758 8.36138 23.9356 8.85316C23.8964 9.33327 23.8246 9.58834 23.7313 9.77148L25.5133 10.6795ZM23.656 12.5368C24.4557 12.1293 25.1059 11.4791 25.5133 10.6795L23.7313 9.77148C23.5156 10.1948 23.1714 10.539 22.748 10.7548L23.656 12.5368ZM19.7766 13C20.6701 13 21.4005 13.0008 21.9926 12.9524C22.5964 12.9031 23.1439 12.7977 23.656 12.5368L22.748 10.7548C22.5649 10.8481 22.3098 10.9198 21.8297 10.959C21.3379 10.9992 20.7031 11 19.7766 11V13ZM6.17656 13H19.7766V11H6.17656V13ZM2.2971 12.5368C2.80918 12.7977 3.35675 12.9031 3.96054 12.9524C4.55265 13.0008 5.28298 13 6.17656 13V11C5.24998 11 4.61518 10.9992 4.1234 10.959C3.6433 10.9198 3.38822 10.8481 3.20508 10.7548L2.2971 12.5368ZM0.439785 10.6795C0.847247 11.4791 1.49741 12.1293 2.2971 12.5368L3.20508 10.7548C2.78172 10.539 2.43751 10.1948 2.2218 9.77148L0.439785 10.6795ZM-0.0234375 6.8C-0.0234375 7.69358 -0.0242152 8.42391 0.0241622 9.01603C0.0734934 9.61981 0.17887 10.1674 0.439785 10.6795L2.2218 9.77148C2.12848 9.58834 2.05675 9.33327 2.01752 8.85316C1.97734 8.36138 1.97656 7.72659 1.97656 6.8H-0.0234375ZM-0.0234375 5.2V6.8H1.97656V5.2H-0.0234375ZM25.7273 5.03145C26.1588 5.14251 26.4766 5.53541 26.4766 6H28.4766C28.4766 4.60075 27.5195 3.42755 26.2258 3.09457L25.7273 5.03145ZM26.9766 7.93699V4.06301H24.9766V7.93699H26.9766ZM26.4766 6C26.4766 6.46459 26.1588 6.85749 25.7273 6.96855L26.2258 8.90543C27.5195 8.57245 28.4766 7.39925 28.4766 6H26.4766Z" fill="white" mask="url(#path-1-inside-1_2201_45)"/>
</g>
<rect x="2.97656" y="2" width="20" height="8" rx="1.5" fill="white"/>
</svg>
</div>
<div class="main_page" id="main_page">
<div class="main_page_header">
<img class="exit_btn" id="exit_btn" src="img/close_btn.svg">
<img class="icon_btn" src="img/icon_btn.svg">
<img class="new_page_btn" src="img/new_page_btn.svg">
<span class="dik_cizgi"></span>
</div>
<div class="main_page_body">
<div class="main_page_profile_bg">
<span class="main_page_profile_lbl">Profile</span>
<span class="main_page_profile_lbl_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum nulla metus.</span>
<div class="main_page_inner_profile">
<img class="character_photo" id="character_photo" src="">
<span class="character_first_last_name" id="character_first_last_name">First Name</span>
<span class="character_vip_lvl_lbl">VIP 4</span>
<img class="character_vip_status_img" src="img/vip_status.svg">
</div>
<span class="main_page_lastgame_lbl">Last Games</span>
<span class="main_page_lastgame_lbl_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum nulla metus.</span>
</div>
<div class="main_page_games_bg">
<div class="main_page_games_header">
<div class="games_header_chips_add_bg">
<img class="games_header_chips_add_img" src="img/red_chips.svg">
<span class="games_header_chips_add_img_bg"></span>
<span class="games_header_chip_lbl">CHIP</span>
<span class="games_header_chips_amount_lbl">56.225</span>
<img class="games_header_chip_add_btn" src="img/chips_add_red_btn.svg">
</div>
<div class="games_header_vip_add_bg">
<img class="games_header_vip_img" src="img/vip_status.svg">
<span class="games_header_vip_lvl_lbl">LEVEL 4</span>
<span class="games_header_vip_rate_lbl">%65.50</span>
<img class="games_header_vip_add_btn" src="img/vip_add_yellow_btn.svg">
</div>
</div>
</div>
</div>
</div>
</div>
2
Answers
What exactly do you expect from it? it works for me without any problem
Animation works normally:
Do you want the animation to be applied to #Tablet_Main_Page/all the elements presented? Because as for now, the animation is limited to #mainpage. If that’s the case, you can add
animation: vacuum-effect 1s ease-out;to #Tablet_Main_Page for the animation to be spread to all elements including the header.