انیمیشن‌ها (Animations)

ساخت انیمیشن‌های پیچیده با @keyframes: چند مرحله‌ای، تکرار و تاخیر

انیمیشن CSS

انیمیشن‌ها (@keyframes) امکان ایجاد انیمیشن‌های چند مرحله‌ای و پیچیده را فراهم می‌کنند.

ساختار @keyframes

@keyframes name {
        0%   { opacity: 0; }
        50%  { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* یا with from/to */
    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

اعمال انیمیشن

.box {
        animation: fadeIn 2s ease infinite;
    }

ویژگی‌های animation

ویژگیتوضیح
animation-nameنام @keyframes
animation-durationمدت زمان
animation-timing-functionنحوه تغییر
animation-delayتأخیر
animation-iteration-countتعداد تکرار (infinite)
animation-directionجهت (reverse, alternate)
animation-fill-modeحالت پایانی (forwards)

انیمیشن‌های محبوب

/* Fade In */
    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    
    /* Slide In */
    @keyframes slideIn {
        from { transform: translateX(-100%); opacity: 0; }
        to   { transform: translateX(0); opacity: 1; }
    }
    
    /* Bounce */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-30px); }
        60% { transform: translateY(-15px); }
    }
    
    /* Pulse */
    @keyframes pulse {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    /* Spin */
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

animation-direction

مقدارتوضیح
normalنرمال (پیش‌فرض)
reverseمعکوس
alternateنرمال سپس معکوس
alternate-reverseمعکوس سپس نرمال

animation-fill-mode

/* حالت پایانی حفظ شود */
    animation-fill-mode: forwards;
    
    /* حالت اولیه قبل از شروع */
    animation-fill-mode: backwards;
    
    /* هر دو */
    animation-fill-mode: both;

چند انیمیشن

.box {
        animation: fadeIn 1s, slideIn 1s 0.5s;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط