CSSالأنيميشين

مفهوم الأنيميشين

الأنيميشين ( Animations ) فكرتها جعل خصائص العنصر تتغير تدريجياً خلال مدة زمنية محددة و بشكل تلقائي الأمر الذي يجعلك قادر على عرض مؤثرات حركية رائعة في صفحات الويب.

يمكنك إضافة أنيميشين أو مؤثرات البصرية لأي عنصر في الصفحة لإظهاره بشكل الذي تريده، فمثلاً يمكنك جعل لونه يتغير كل مدة معينة، جعله يتحرك أو يدور أو يتنطط، جعله يختفي و يظهر و غيرها من الأشياء التي يمكنك فعلها.

في هذا الدرس ستتعرف على جميع الخصائص التالية و التي من خلالها يمكنك إضافة أنيميشين للعنصر و التحكم به:

@keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation

أساسيات الأنيميشين

لإضافة أنيميشين للعنصر يجب عليك فعل خطوتين أساسيتين و هما:

• تعريف الأنيميشين، إسمه و ما هي القيم التي تتغير فيه.
• تطبيق الأنيميشين على العنصر و تحديد المدة التي سيحدث خلالها.

في المثال التالي قمنا بتعريف أنيمشين إسمه example يقوم بتغير لون خلفية العنصر من الأحمر و إلى الأزرق.
بعدها قمنا بجعل عنصر يستعمل هذا الأنيميشين من خلال إسمه و قد جعلناه ينفذه خلال 3 ثواني.

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

div {
    background-color: red;
    animation-name: example;
    animation-duration: 3s;
} 

كود الأنيميشين

• بواسطة المحدد @keyframes يتم تعريف إسم و خصائص الأنيميشين.
• بداخل المحدد from { } نكتب ما هي القيم التي سيبدأ بها العنصر الذي يستعمل الأنيميشين.
• بداخل المحدد to { } نكتب ما هي القيم التي ستصبح في العنصر الذي يستعمل الأنيميشين حين يتنفذ بالكامل.
• الأنيميشين يتم تطبيقه على أي عنصر من خلال إضافة الخاصية animation-name و إعطاءها إسم الأنيميشين كقيمة.
• لكي يتنفذ الأنيميشين على العنصر يجب إضافة الخاصية animation-duration و إعطاءها قيمة تمثل المدة التي سيتم خلالها تنفيذ الأنيميشين.

المحددات المئوية للأنيميشين

بدلاً من استخدام محدد البداية from { } و النهاية فقط to { } يمكنك استخدام أرقام مئوية كمحددات الأمر الذي يجعلك قادر على تحديد متى سيتم تغيير قيم العناصر بدقة أكثر.

في المثال التالي قمنا بتعريف أنيمشين إسمه example يقوم بتغير لون خلفية العنصر الذي يستعمله 4 مرات على النحو التالي:

• عند 0%، أي في البداية لونه يكون برتقالي.
• عند 33%، أي بعدها بقليل لونه يصبح أحمر.
• عند 66%، أي بعدها أيضاً لونه يصبح أزرق.
• عند 100%، أي في النهاية لونه يصبح أخضر.

بعدها قمنا بجعل عنصر يستعمل هذا الأنيميشين من خلال إسمه و قد جعلناه ينفذه خلال 4 ثواني.

@keyframes example {
    0% {
        background-color: orange;
    }
    33% {
        background-color: red;
    }
    66% {
        background-color: blue;
    }
    100% {
        background-color: green;
    }
}

div {
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
} 

تأخير موعد بدء الأنيميشين

لجعل الأنيميشين يبدأ بعد مدة محددة يمكنك استخدام الخاصية animation-delay و إعطاءها المدة التي تريدها كقيمة.

في المثال التالي قمنا بجعل العنصر ينتظر يبدأ الأنيميشين بعد مرور ثانيتين.

@keyframes example {
    0% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    50% {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
    100% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

في المثال التالي قمنا بجعل العنصر يبدأ الأنيميشين و يتجاوز أول ثانيتين فيه.
ملاحظة: بما أن الأنيميشين يتألف من 4 ثواني، فإنه بعد تجاوز أول ثانيتين فيه سيبدأ من عند 50%.

@keyframes example {
    0% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    50% {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
    100% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}

تحديد كم مرة سيتكرر الأنيميشين

لتحديد كم مرة سيعاد الأنيميشين يمكنك استخدام الخاصية animation-iteration-count و إعطاءها عدد يمثل كم مرة سيتم تكراره و كذلك يمكنك استخدام القيمة infinite لجعله يستمر في تكرار نفسه بدون توقف.

في المثال التالي قمنا بجعل العنصر يعيد الأنيميشين ثلاث مرات فقط.

@keyframes example {
    0% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    50% {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
    100% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

في المثال التالي قمنا بجعل العنصر يعيد الأنيميشين يُعاد إلا ما لا نهاية.

@keyframes example {
    0% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    50% {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
    100% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

تحديد إتجاه تشغيل الأنيميشين

يمكنك استخدام الخاصية animation-direction لتحديد اتجاه تشغيل الأنيميشين، أي هل لتحديد ما إن كان سيبدأ من الأول إلى الآخر أو العكس.

فيما يلي القيم التي يمكنك وضعها لها كقيمة حتى تحدد كيف سيكون اتجاه عمل الأنيمشين.

في المثال التالي قمنا بجعل العنصر يستخدم أنيميشين يقوم بتغيير لون خلفيته من الأحمر إلى الأزرق.
بعدها قمنا بجعل الأنيميشين يبدأ بشكل عكسي من النهاية إلى البداية، لذلك لون خلفية العنصر سيبدأ بالأزرق و من ثم يصبح أحمر.

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

div {
    background-color: red;
    animation-name: example;
    animation-duration: 3s;
    animation-direction: reverse;
} 

في المثال التالي قمنا بجعل العنصر يستخدم أنيميشين يقوم بتغيير لون خلفيته من الأحمر إلى الأزرق.
بعدها قمنا بجعل الأنيميشين يبدأ من البداية إلى النهاية و من ثم يرجع للبداية و جعلنا هذه العملية تتكرر بلا توقف.

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

div {
    background-color: red;
    animation-name: example;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
} 

تحديد منحنى سرعة الأنيميشين

يمكنك استخدام الخاصية animation-timing-function لتحديد كيف ستكون سرعة تنفيذ التأثير.

فيما يلي القيم التي يمكنك وضعها لها كقيمة حتى تحدد كيف ستكون سرعة الأنيميشين.

فيما يلي دوال يمكنك وضعها لها كقيمة حتى تحدد كيف ستكون سرعة الأنيميشين.

في المثال التالي قمنا بعرض عدة دوائر، الأنيميشين الخاص بها يجعلها تنتقل إلى الجهة المقابلة خلال ثانيتين و بشكل متكرر.
حتى تلاحظ كيف يتسارع و يتباطئ منحنى السرعة، جعلنا جميع الدوائر تتحرك في وقت واحد.

@keyframes example {
    from {
        left: 100px;
    }
    to {
        left: calc(100% - 50px);
    }
}

.circle {
    border-radius: 50%;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-name: example;
    animation-duration: 2s;
}

.linear {
    background: #ED796D;
    transition-timing-function: linear;
}

.ease {
    background: #ED976D;
    transition-timing-function: ease;
}

.ease-in {
    background: #2ECC71;
    transition-timing-function: ease-in;
}

.ease-out {
    background: #3498DB;
    transition-timing-function: ease-out;
}

.ease-in-out {
    background: #1ABC9C;
    transition-timing-function: ease-in-out;
}

.cubic-bezier {
    background: #0A8EA0;
    transition-timing-function: cubic-bezier(0.1, 0.5, 1, 0.1);
}

.steps-start {
    background: #777;
    transition-timing-function: steps(5, start);
}

.steps-end {
    background: #777;
    transition-timing-function: steps(5, end);
}

إيقاف | تشغيل الأنيميشين

يمكنك استخدام الخاصية animation-play-state للتحكم بحالة الأنيميشين، أي لجعله يتوقف أو يكمل التنفيذ.

فيما يلي القيم التي يمكنك إعطاءها لها كقيمة للتحكم بحالة الأنيميشين.

في المثال التالي قمنا بجعل الأنيميشين يتوقف عند تمرير الماوس فوق العنصر.

@keyframes example {
    from {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    to {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

div:hover {
    animation-play-state: paused;
}

إضافة أنيميشين بشكل مختصر

يمكنك تحديد جميع خصائص الأنيميشين للعنصر باستخدام الخاصية animation مع الإشارة إلى أنه يمكنك إعطاءها القيم كيفما شئت بدون ترتيب محدد.

في المثال التالي، قمنا بجعل العنصر ينفذ الأنيميشين خلال ثانيتين و بشكل متكرر.

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

div {
    animation: 2s ease-in-out infinite alternate example;
}

في حال أردت إضافة أكثر من أنيميشين للعنصر، يمكنك ببساطة وضع فاصلة بين الخصائص التي تريد تنفيذه لكل أنيميشين على حدا.

@keyframes color-change {
    from { background-color: red; }
    to { background-color: blue; }
}

@keyframes slide-horizontal {
    from { left: 0; }
    to { left: calc(100% - 100px); }
}

div {
    animation:
        2s ease-in-out infinite alternate color-change,
        2s linear infinite alternate slide-horizontal;
}

إضافة أنيميشين لصورة SVG

يمكنك إضافة تحريكات رائعة لرسومات SVG و لكن عليك فعل الخطوات التالية ليكون ذلك ممكناً:

• وضع كود صورة الـSVG كما هو في الصفحة و ليس صورة إمتدادها .svg.
• العناصر التي ستتحكم فيها بداخل الرسم، يجب أن يكون لديها class أو id حتى تستطيع الوصول لها بشكل سهل.

في المثال التالي، قمنا بإضافة شعار هرمش في الصفحة على شكل كود SVG و من ثم أضفنا إثنين أنيميشين له على النحو التالي:

• الأنيميشين الأول إسمه logo-slide و هو يجعل الشعار بأكمله يتحرك يميناً و يساراً.
• الأنيميشين الثاني إسمه sticker-rotate و هو يجعل الحرف H الموضوع على الشعار يدور أثناء تحرّك الشعار.

@keyframes logo-slide {
    from {
        transform: translateX(-30px);
    }
    to {
        transform: translateX(30px);
    }
}

@keyframes sticker-rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

svg {
    animation: logo-slide 1.5s ease-in-out infinite alternate;
    transform-origin: bottom;
    max-width: 120px;
}

#sticker {
    animation: sticker-rotate 1.5s ease-in-out infinite alternate;
    transform-origin: center;
    transform-box: fill-box;
}