SVG animasiya generatoru
Forma, rəng və effekt seçin — animasiyalı SVG önbaxışda oynayır, aşağıda isə səhifəyə birbaşa yapışdırmaq olan inline SVG kodu və CSS @keyframes görünür.
<svg viewBox="0 0 100 100" width="160" height="160" aria-hidden="true">
<polygon
class="shape"
points="50,20.2 58.5,41.4 81.4,43 63.8,57.6 69.4,79.8 50,67.7 30.6,79.8 36.2,57.6 18.6,43 41.5,41.4"
fill="#fbbf24"
stroke="#b45309"
stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round"
/>
</svg>
.shape {
transform-box: fill-box;
transform-origin: 50% 55%;
animation: spin 2s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.shape {
animation: none;
}
}Necə istifadə etmək olar
- Formanı seçin — dairə, kvadrat, ulduz, ürək və ya təsdiq işarəsi — və doldurma rəngini, kontur rəngini və qalınlığını təyin edin.
- Effekti seçin: fırlanma (
rotate), döyünmə (scale), sıçrayış, solma,stroke-dasharrayilə kontur çəkmə və ya rəng dəyişməsi (doldurma ilə kontur yerlərini dəyişir). - Müddəti, gecikməni, təkrar sayını, sürət əyrisini və istiqaməti tənzimləyin. Önbaxışdakı «Fasilə» və «Yenidən» düymələri animasiyanı diqqətlə izləməyə kömək edir.
- «Kopyala» düyməsini basın, SVG-ni HTML-ə, CSS-i isə stil faylına yapışdırın.
prefers-reduced-motionbloku artıq daxildir.
Bu necə işləyir
SVG-ni niyə CSS ilə animasiya etməli
Inline SVG elementləri DOM-un hissəsidir, ona görə onları adi animation və @keyframes ilə — JavaScript və kitabxana olmadan — üslublaşdırmaq və animasiya etmək olar. Bu <circle>, <rect>, <path> və digər formalar üçün işləyir, lakin <img> və ya background-image ilə qoşulmuş SVG üçün yox: səhifənin CSS-i belə fayla çatmır, animasiyanı SVG-nin içində yazmaq lazımdır.
transform-box və transform-origin
SVG-də transformasiya nöqtəsi susmaya görə bütün təsvirin yuxarı sol küncüdür (0 0), buna görə fırlanma formanı yanlış nöqtə ətrafında yelləndirir. transform-box: fill-box başlanğıc nöqtəsini formanın öz çərçivəsinə bağlayır, transform-origin: center isə onu ortaya qoyur. Beşguşəli ulduz aşağıdan «ağırdır»: onun vizual mərkəzi çərçivənin hündürlüyünün təxminən 55%-də yerləşir, ona görə generator ulduz üçün 50% 55% yazır.
.shape {
transform-box: fill-box;
transform-origin: center;
}Konturu çəkmək: dasharray və dashoffset
stroke-dasharray ştrixlərin və boşluqların uzunluğunu, stroke-dashoffset isə bu naxışın sürüşməsini təyin edir. Ştrixin uzunluğu bütün konturun uzunluğuna, sürüşmə isə eyni qiymətə bərabər olarsa, xətt görünmür; sürüşməni 0-a qədər animasiya etdikdə xətt «çəkilir». Uzunluq istifadəçi vahidləri ilə ölçülür: generator sonda nöqtə qalmasın deyə konturun uzunluğundan bir az böyük qiymət götürür. Öz formanız üçün uzunluğu getTotalLength() ilə almaq olar. Doldurulmuş formalarda generator doldurmanı da fill-opacity ilə yumşaq göstərir.
@keyframes draw {
from { stroke-dashoffset: 177; }
to { stroke-dashoffset: 0; }
}prefers-reduced-motion-a hörmət edin
Fasiləsiz hərəkət vestibulyar pozuntusu olan insanlarda narahatlıq yarada bilər, buna görə sistemlərdə «hərəkəti azalt» ayarı var. Generator animasiyanı söndürən @media (prefers-reduced-motion: reduce) bloku əlavə edir; əsas üslublar tam görünən qalır, yəni heç nə itmir. Dekorativ SVG-yə aria-hidden="true" əlavə etmək məsləhətdir.
@media (prefers-reduced-motion: reduce) {
.shape { animation: none; }
}Tez-tez verilən suallar
img teqi ilə qoşulmuş SVG-ni animasiya etmək olarmı?
Səhifənin CSS-i ilə yox: səhifənin üslubları <img>-in içinə çatmır. @keyframes olan <style>-ı SVG faylının özünə qoyun və ya SVG-ni birbaşa HTML-ə yerləşdirin.
SVG niyə yanlış nöqtə ətrafında fırlanır?
Çünki susmaya görə transformasiya nöqtəsi təsvirin yuxarı sol küncüdür. transform-box: fill-box və transform-origin: center əlavə edin.
CSS animasiyası yoxsa SMIL (animate teqi) yaxşıdır?
CSS-i digər üslublarla birləşdirmək asandır, media sorğularına, o cümlədən prefers-reduced-motion-a reaksiya verir. SMIL SVG-nin içində yaşayır və bütün müasir brauzerlərdə işləyir, amma daha az istifadə olunur.
SVG animasiyası brauzer üçün ağırdırmı?
transform və opacity animasiyası ucuz başa gəlir. d atributunu, filtrləri və ya yüzlərlə elementi eyni anda animasiya etmək daha çox yük verir — zəif telefonlarda yoxlayın.
