עידון אנימציות מובנות של אלמנטור

עידון אנימציות מובנות של אלמנטור

האנימציות המובנות של אלמנטור לפעמים יכולות להיו...

האנימציות המובנות של אלמנטור לפעמים יכולות להיות מאד גסות וחדות מדי. להלן קוד שקיבלתי מכפיר בקיש, בעל האתר LEMON כיצד לעדן את האנימציה המובנית שתהיה יותר עדינה ונעימה וחווייתית למשתמש.
כידוע לכל אנימציה יש את הקלאס שלה ועליה נבנה את השינוי. את הקוד הבא נכניס לקוד מותאם של אלמנטור לכל האתר ואת הקלאס נשנה לקלאס של האנימציה שאותה נרצה לשנות.

הדוגמא היא של האנימציות המובנות למעלה, למטה ימינה ושמאלה:

/* change to built in animation */
.fadeInUp {
    animation-name: fadeInUp2 !important;
}
@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        transform: translate3d(0,40px,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.fadeInDown {
    animation-name: fadeInDown2 !important;
}
@keyframes fadeInDown2 {
    0% {
        opacity: 0;
        transform: translate3d(0,-40px,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.fadeInLeft {
    animation-name: fadeInLeft2 !important;
}
@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        transform: translate3d(-40px,0,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.fadeInRight {
    animation-name: fadeInRight2 !important;
}
@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        transform: translate3d(40px,0,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}Code language: CSS (css)

לקישור חיצוני >>

נשמח לקבל תכנים נוספים שלדעתכם יכולים לעניין את קהל היעד

פרטי יצירת קשר
דילוג לתוכן