لغة css وفرت للمطورين مجالا واسعا لخلق تأثيرات جديدة ومتنوعة . فأصبح من السهل جدا الآن بكود بسيط خلق تأثير حركي جذاب يضفي بعض الحياة والواقعية على التصميم.

واليوم سنتجول معا بين بعض هذه التأثيرات ونعرضها لكم ….

1- التغيير من تأثير لآخر  (تأثير اضاءة المصباح)

إن تاثيرات الـ css  لديها القدرة علي تغيير الخصائص والعناصر لقيم وأشكال جديدة علي الفور .تكمن الخدعة هنا في امرين بفرق توقيت بسيط جدا قد يصل الى .001% .

@keyframes toggleOpacity { 50% { opacity: 1; } /* اخفاء -اغلاق */ 50.001% { opacity: 0.4; } /* تبقي هذه الحالة لفترة زمنية قصيرة */ 52.999% { opacity: 0.4; } /* اظهار مرة اخري */ 53% { opacity: 1; } } See the Pen ltinL by mohamed maher (@fwasl) on CodePen. 0

  المثال التالي هو دليل علي تبديل التعتيم وظل النص لتقليد اضاءة وإغلاق مصابيح اللوحة

See the Pen No Vacancy 404 CSS Only by Zach Saucier (@Zeaklous) on CodePen.0

2-تأثير Negative animation

التأثير النيجاتيف هو تبسيط لمفهوم بدء حركة معينة لعدد من القيم او العناصر لفترة من الوقت ، يمكن اعادتها اذا ما قمنا بتغيير الوقت المحدد.

وهذا مثال علي ذلك حيث تبدأ كل دائرة علي الفور بالتحرك في نطاق دورة التحريك

See the Pen zafjE by mohamed maher (@fwasl) on CodePen.0

3- التحريك النسبي

إن العناصر والأشكال مثل الدوائر والمربعات تحتاج الي عرض وطول نسبي وأن يكون ال (padding) بالنسبة المئوية (%) , والسر في هذه الخدعة هو ال (padding-bottom) ليجعلها متناسبة مع العرض مثل هذا المثال :

.container {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
}

See the Pen Akwnf by mohamed maher (@fwasl) on CodePen.
4025

 وتسطيع أن تري هذا في المثال التالي عن طريق تغيير حجم النافذة

See the Pen Responsive CSS bars by Zach Saucier (@Zeaklous) on CodePen.4025

4-تغيير وتحويل المصدر اثناء الحركة

في المثال التالي , يمكننا عمل تحريك واحد بواسطة الدوران في محاور مختلفة بدلا من استخدام 4 حركات منفصلة

See the Pen Change transformation-origin mid animation by Zach Saucier (@Zeaklous) on CodePen.4025

والجانب السلبي من هذه الخدعة هي انه لا يمكنك إستخدام   animation-mode: forwards; فقط لجزء من الحركة ,وهذا يعني انه يجب إعادة العنصر لحالته السابقة قبل إجراء التعديل في   transformation-origin .

مصدر 1

مصدر 2