Lesson 40 / الدرس 40

Transforms & animations / التحويلات والحركات

Move, rotate and scale an element with transform without disturbing the layout around it, then build a looping animation with @keyframes.

حرّك عنصرًا ودوّره وكبّره أو صغّره باستخدام transform دون أن تُخل بالتخطيط من حوله، ثم ابنِ حركة متكررة بواسطة @keyframes.

Properties like margin or top move an element by pushing everything around it too — the box model shifts, and neighboring elements react. transform is different: it moves, rotates or resizes an element visually, on top of the page, without changing the space it reserves in the layout at all. Combined with the transition you just learned, it is how a hovered card lifts or a button grows slightly without anything around it jumping out of the way.

خصائص مثل margin أو top تُحرّك عنصرًا عبر دفع كل ما حوله أيضًا — نموذج الصندوق يتزحزح، والعناصر المجاورة تتفاعل. أما transform فمختلفة: تُحرّك العنصر أو تُدوّره أو تُغيّر حجمه بصريًا، فوق الصفحة، دون أن تُغيّر المساحة التي يحجزها في التخطيط على الإطلاق. ومع transition الذي تعلمته للتو، هذه هي الطريقة التي ترتفع بها بطاقة عند hover أو يكبر بها زر قليلًا دون أن يقفز أي شيء حوله جانبًا.

Three transform functions: `translate`, `rotate`, `scale`

ثلاث دوال تحويل: translate و rotate و scale

.card {
    transition: transform 0.2s ease-out;
}

.card:hover {
    transform: translateY(-8px);
}

translateY(-8px) shifts the element 8 pixels up. translateX() moves it sideways, and translate(x, y) does both at once. Hover the card — it lifts, and nothing else on the page moves to make room, because as far as layout is concerned it never left.

translateY(-8px) تُزيح العنصر 8 بكسل للأعلى. و translateX() تُحرّكه أفقيًا، و translate(x, y) تفعل الاثنين معًا. مرّر المؤشر فوق البطاقة — ترتفع، ولا يتحرك أي شيء آخر في الصفحة ليفسح لها مكانًا، لأنها من ناحية التخطيط لم تغادر مكانها أبدًا.

.icon {
    transition: transform 0.3s ease-in-out;
}

.icon:hover {
    transform: rotate(20deg) scale(1.2);
}

rotate(20deg) turns the element, and scale(1.2) grows it to 120% of its size — scale(0.8) would shrink it instead. Listing more than one function inside transform, separated by spaces, applies all of them together.

rotate(20deg) تُدير العنصر، و scale(1.2) تُكبّره إلى 120% من حجمه — و scale(0.8) تُصغّره بدلًا من ذلك. وسرد أكثر من دالة داخل transform، مفصولة بمسافات، يُطبّقها جميعًا معًا.

A repeating animation with `@keyframes`

حركة متكررة عبر @keyframes

A transition only ever runs in response to something changing, like :hover. An animation plays on its own, with no trigger needed, and can repeat forever. First you describe the stages inside a named @keyframes rule using percentages — 0% is the start, 100% is the end, and you can add stops in between. Then you attach it to an element with animation-name plus at least animation-duration.

الانتقال لا يعمل إلا استجابةً لتغيّر ما، مثل :hover. أما الحركة فتُشغَّل من تلقائها، بلا حاجة إلى مُحفِّز، ويمكن أن تتكرر إلى الأبد. تصف أولًا مراحلها داخل قاعدة @keyframes مُسمّاة باستخدام نسب مئوية — 0% هي البداية، و 100% هي النهاية، ويمكنك إضافة محطات بينهما. ثم تربطها بعنصر عبر animation-name مع animation-duration على الأقل.

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.badge {
    animation-name: pulse;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

The badge grows a little and shrinks back, forever, with no pointer or click involved. animation-name must match the @keyframes name exactly, and animation-iteration-count: infinite is what makes it loop instead of running once.

الشارة تكبر قليلًا ثم تعود إلى حجمها، إلى الأبد، دون أي مؤشر أو نقرة. ويجب أن تطابق animation-name اسم @keyframes تمامًا، و animation-iteration-count: infinite هي ما يجعلها تتكرر بدل أن تعمل مرة واحدة.

الحركة التي لا تتوقف ليست خيارًا محايدًا. فبعض الناس تصيبهم الدوخة أو الغثيان من الحركة المتكررة، وبإمكانهم إخبار أجهزتهم بذلك — فينقل المتصفح هذا الطلب عبر prefers-reduced-motion. لذا غلّف أي حركة مستمرة بحيث لا تعمل إلا لمن لم يطلب تقليلها: @media (prefers-reduced-motion: no-preference) { … }. فتبقى الشارة أعلاه تنبض لبقية الزوار، وتكفّ عن كونها مشكلة لمن كانت مشكلة له.

Property	Controls
animation-name	Which @keyframes rule to play
animation-duration	How long one cycle takes
animation-timing-function	How the speed changes during a cycle
animation-iteration-count	How many times it repeats — a number, or infinite

The animation properties used in this lesson. They can also be combined into an animation shorthand, in this same order.

خصائص الحركة المستخدمة في هذا الدرس. ويمكن دمجها أيضًا في اختزال animation، بالترتيب نفسه.

الخطأ الإملائي في animation-name — أو نسيان تسمية قاعدة @keyframes بالاسم نفسه — يفشل تمامًا كما يفشل متغيّر CSS بخطأ إملائي: بصمت. لا يظهر خطأ، ولا يتحرك شيء، ويبقى العنصر ساكنًا دون أي إشارة إلى السبب. فإن لم تعمل حركة على الإطلاق، قارن الاسمين حرفًا حرفًا قبل التحقق من أي شيء آخر.

تحريك transform و opacity يبقى سلسًا حتى على جوال بطيء، لأن المتصفح يستطيع تحريك العنصر المرسوم بالفعل دون إعادة حساب تخطيط بقية الصفحة. أما تحريك width أو top أو margin فيفرض تلك الإعادة في كل إطار، ولهذا غالبًا ما تبدو الصناديق المتحركة متقطعة.

Try it live / جرّب بنفسك

<span class="badge">1</span>

<button class="btn">Hover me</button>

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: tomato;
    color: white;
    /* define @keyframes and apply it here */
}

.btn {
    background-color: navy;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    /* add a transition here */
}

.btn:hover {
    /* add a transform here */
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which function moves an element visually without affecting the layout of elements around it?

2. What connects a @keyframes rule to the element that should play it?

ما الذي يربط قاعدة @keyframes بالعنصر الذي يجب أن يشغّلها؟

3. Why is animating transform usually smoother than animating top or width?

لماذا يكون تحريك transform عادة أكثر سلاسة من تحريك top أو width؟

Your task / مهمتك

Build a small notification badge that pulses continuously using @keyframes and animation, and a button that lifts and grows slightly on :hover using transform with a transition.

ابنِ شارة إشعار صغيرة تنبض باستمرار باستخدام @keyframes و animation، وزرًا يرتفع ويكبر قليلًا عند :hover باستخدام transform مع transition.

Defines an @keyframes rule and applies it with a matching animation-name تُعرّف قاعدة @keyframes وتُطبّقها بـ animation-name مطابق
The badge repeats forever with animation-iteration-count: infinite الشارة تتكرر إلى الأبد بـ animation-iteration-count: infinite
The button uses transform on :hover, paired with a transition on its base selector الزر يستخدم transform عند :hover، مع transition على مُحدِّده الأساسي