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

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

إن تاثيرات الـ css  لديها القدرة علي تغيير الخصائص والعناصر لقيم وأشكال جديدة علي الفور .تكمن الخدعة هنا في امرين بفرق توقيت بسيط جدا قد يصل الى .001% . [codepen_embed height=”268″ theme_id=”0″ slug_hash=”ltinL” default_tab=”css”] @keyframes toggleOpacity { 50% { opacity: 1; } /* اخفاء -اغلاق */ 50.001% { opacity: 0.4; } /* تبقي هذه الحالة لفترة زمنية قصيرة */ 52.999% { opacity: 0.4; } /* اظهار مرة اخري */ 53% { opacity: 1; } } See the Pen <a href=’http://codepen.io/fwasl/pen/ltinL’>ltinL</a> by mohamed maher (<a href=’http://codepen.io/fwasl’>@fwasl</a>) on <a href=’http://codepen.io’>CodePen</a>. [/codepen_embed]  

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

  [codepen_embed height=”268″ theme_id=”0″ slug_hash=”dIomg” default_tab=”result”]See the Pen <a href=’http://codepen.io/Zeaklous/pen/dIomg’>No Vacancy 404 CSS Only</a> by Zach Saucier (<a href=’http://codepen.io/Zeaklous’>@Zeaklous</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]  

2-تأثير Negative animation

التأثير النيجاتيف هو تبسيط لمفهوم بدء حركة معينة لعدد من القيم او العناصر لفترة من الوقت ، يمكن اعادتها اذا ما قمنا بتغيير الوقت المحدد. وهذا مثال علي ذلك حيث تبدأ كل دائرة علي الفور بالتحرك في نطاق دورة التحريك   [codepen_embed height=”268″ theme_id=”0″ slug_hash=”zafjE” default_tab=”result”]See the Pen <a href=’http://codepen.io/fwasl/pen/zafjE’>zafjE</a> by mohamed maher (<a href=’http://codepen.io/fwasl’>@fwasl</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

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

إن العناصر والأشكال مثل الدوائر والمربعات تحتاج الي عرض وطول نسبي وأن يكون ال (padding) بالنسبة المئوية (%) , والسر في هذه الخدعة هو ال (padding-bottom) ليجعلها متناسبة مع العرض مثل هذا المثال : [codepen_embed height=”268″ theme_id=”4025″ slug_hash=”Akwnf” default_tab=”css”] .container { position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%; } See the Pen <a href=’http://codepen.io/fwasl/pen/Akwnf’>Akwnf</a> by mohamed maher (<a href=’http://codepen.io/fwasl’>@fwasl</a>) on <a href=’http://codepen.io’>CodePen</a>. [/codepen_embed]

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

[codepen_embed height=”268″ theme_id=”4025″ slug_hash=”pcfCJ” default_tab=”result”]See the Pen <a href=’http://codepen.io/Zeaklous/pen/pcfCJ’>Responsive CSS bars</a> by Zach Saucier (<a href=’http://codepen.io/Zeaklous’>@Zeaklous</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]  

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

في المثال التالي , يمكننا عمل تحريك واحد بواسطة الدوران في محاور مختلفة بدلا من استخدام 4 حركات منفصلة [codepen_embed height=”268″ theme_id=”4025″ slug_hash=”jiDHL” default_tab=”result”]See the Pen <a href=’http://codepen.io/Zeaklous/pen/jiDHL’>Change transformation-origin mid animation</a> by Zach Saucier (<a href=’http://codepen.io/Zeaklous’>@Zeaklous</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] والجانب السلبي من هذه الخدعة هي انه لا يمكنك إستخدام   [highlight] animation-mode: forwards; [/highlight] فقط لجزء من الحركة ,وهذا يعني انه يجب إعادة العنصر لحالته السابقة قبل إجراء التعديل في   [highlight] transformation-origin [/highlight] . مصدر 1 مصدر 2  ]]>