جوانکاری و جووڵاندنی پاژەکانی ناو ماڵپەڕ (بەشی 2)
Keyframes؛ جووڵانە بێکۆتاییەکان
Keyframes چییە؟
@keyframes ڕێگەت پێدەدات کە چەند قۆناخێکی جووڵان دیاری بکەیت. بۆ نموونە: لە کوێوە دەست پێدەکات، بۆ کوێ دەچێت و چۆن دەگەڕێتەوە.نموونەی یەکەم: جووڵانی سەر و خوارەوە (Float)
<style>
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.floating-box {
width: 80px;
height: 80px;
color: #fff;
background: linear-gradient(135deg, #6366f1, #ec4899);
border-radius: 20px;
animation: float 3s ease-in-out infinite;
}
</style>ئەنجام: شتەکە بەردەوام بەرز و نزم دەبێتەوە، وەک ئەوەی لە ئاودا مەلە بکات.
نموونەی دووەم: جووڵانی سووڕانەوە (Rotate)
<style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { width: 50px; height: 50px; border: 4px solid #e2e8f0; border-top-color: #f60; border-radius: 50%; animation: spin 3s linear infinite; } </style>ئەنجام: بازنەیەکی سووڕاو کە وەک نیشاندەری بارکردن کار دەکات.
نموونەی سێیەم: جووڵانی درەوشانەوە (Pulse)
نموونەی دووەم: جووڵانی سووڕانەوە (Rotate)
<style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { width: 50px; height: 50px; border: 4px solid #e2e8f0; border-top-color: #f60; border-radius: 50%; animation: spin 3s linear infinite; } </style>ئەنجام: بازنەیەکی سووڕاو کە وەک نیشاندەری بارکردن کار دەکات.
نموونەی سێیەم: جووڵانی درەوشانەوە (Pulse)
<style>
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(50, 255, 150, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255, 255, 0, 0.5); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.2); }
}
.pulse-btn {
padding: 15px 35px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
animation: pulse 2s infinite;
}
</style>
ئەنجام: دوگمەکە بەردەوام گەورە و بچووک دەبێت و شەپۆلێکی ڕەنگاوڕەنگی لێوە دەردەکەوێت.
نموونەی چوارەم: جووڵانی شەپۆل (Wave)
<style> @keyframes wave { 0% { transform: translateX(0); } 25% { transform: translateX(-20px); } 50% { transform: translateX(20px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .wave-text { display: inline-block; font-size: 24px; font-weight: bold; color: #6366f1; animation: wave 2s ease-in-out infinite; } </style>ئەنجام: نووسینەکە وەک شەپۆل بۆ لای چەپ و ڕاست دەجووڵێت.
ئەنجام: دوگمەکە بەردەوام گەورە و بچووک دەبێت و شەپۆلێکی ڕەنگاوڕەنگی لێوە دەردەکەوێت.
نموونەی چوارەم: جووڵانی شەپۆل (Wave)
<style> @keyframes wave { 0% { transform: translateX(0); } 25% { transform: translateX(-20px); } 50% { transform: translateX(20px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .wave-text { display: inline-block; font-size: 24px; font-weight: bold; color: #6366f1; animation: wave 2s ease-in-out infinite; } </style>ئەنجام: نووسینەکە وەک شەپۆل بۆ لای چەپ و ڕاست دەجووڵێت.
خاڵە گرنگەکان
| خاڵ | ڕوونکردنەوە |
| from / to | دەستپێک و کۆتایی |
| 0% / 50% / 100% | قۆناخەکان |
| infinite | بێکۆتایی دووبارە دەبێتەوە |
| alternate | بەرەوپێش و دواوە |
| forwards | لە کۆتاییدا دەوەستێت |
هەموو نموونەکان بە یەکەوە بۆ تاقیکردنەوە
<style>
.container {text-align:center;width:80%;margin:100px auto}
/* ---- 1 ---- */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.floating-box {
width: 80px;
height: 80px;
color: #fff;
background: linear-gradient(135deg, #6366f1, #ec4899);
border-radius: 20px;
animation: float 3s ease-in-out infinite;
}
/* ---- 2 ---- */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #e2e8f0;
border-top-color: #f60;
border-radius: 50%;
animation: spin 3s linear infinite;
}
/* ---- 3 ---- */
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(50, 255, 150, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255, 255, 0, 0.5); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.2); }
}
.pulse-btn {
padding: 15px 35px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
animation: pulse 2s infinite;
}
/* ---- 4 ---- */
@keyframes wave {
0% { transform: translateX(0); }
25% { transform: translateX(-20px); }
50% { transform: translateX(20px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
.wave-text {
display: inline-block;
font-size: 24px;
font-weight: bold;
color: #6366f1;
animation: wave 2s ease-in-out infinite;
}
</style>
<div class="container">
<button class="floating-box">شتی یەکەم</button>
<button class="floating-box">شتی دووەم</button>
<hr>
<div class="spinner"></div>
<hr>
<button class="pulse-btn">شتی سێهەم</button>
<hr>
<div class="wave-text">شەپۆلی نووسراوە</div>
</div>
بارکردنی سەرنجەکان...