(סרטון) מדריך בסיסי לאנימציית css עם אלמנטור

אנימציות CSS עם אלמנטור

אנימציות CSS מאפשרת שליטה מלאה מעבר לאנימציות המובנות של אלמנטור ופותחות הרבה אפשרויות שלא ניתן להגיע אליהן בלי CSS. במדריך הזה אני מדגים מספר דברים שאפשר לעשות עם אנימציית CSS ואלמנטור, לדוגמה:

1. אנימציית חץ שזז ומצביע על טופס השארת פרטים
2. אנימציית צלצול לאייקון של טלפון
3. עידון ועריכה של אנימציות כניסה מובנות של אלמנטור ועוד…

מוזמנים לצפות גם בסרטון הקודם (מדריך css למשתמשי אלמנטור):
https://lmn.co.il/?p=1180

קטעי CSS מתוך הסרטון

חץ מעל הטופס הנעה לפעולה

selector {
    animation: floatingDown 1s infinite ease-in-out;
}
@keyframes floatingDown {
    0%      { transform: translate(0,  0); }
    15%     { transform: translate(0, 15px); }
    100%    { transform: translate(0, 0); }    
}Code language: CSS (css)

אייקון טלפון

selector .elementor-icon i {
      animation: ring 1.5s infinite alternate;
}

@keyframes ring {
  0%   { transform: rotate(-30deg); }
  10%   { transform: rotate(-20deg); }
  20%   { transform: rotate(-40deg); }
  40% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}Code language: CSS (css)

העריכה שעשיתי לאנימציות כניסה של אלמנטור:

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100px,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100px,0,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}Code language: CSS (css)