اضافة اكواد CSS Animation, Keyframes Animation

اولاً Transitions و Animations

تطور واحد مع CSS3 كان القدرة على كتابة السلوكيات للتحولات والرسوم المتحركة. يطلب مطورو الواجهة الأمامية القدرة على تصميم هذه التفاعلات داخل HTML و CSS ، دون استخدام JavaScript أو Flash ، لسنوات. الآن أصبحت رغبتهم الحقيقية.

من خلال انتقالات CSS3 ، يكون لديك القدرة على تغيير مظهر وسلوك عنصر ما عندما يحدث تغيير الحالة ، مثل عندما يتم تحريكه أو التركيز عليه أو نشاطه أو استهدافه.

تسمح الرسوم المتحركة داخل CSS3 بتغيير مظهر وسلوك عنصر ما في إطارات مفتاحية متعددة. توفر الانتقالات تغييرًا من حالة إلى أخرى ، في حين يمكن للرسوم المتحركة تعيين نقاط انتقال متعددة على إطارات مفتاحية مختلفة.

Transitions

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

باستخدام :hover, :focus, :active, و :target الزائفة الطبقات.

هناك أربعة خصائص الانتقال ذات الصلة في المجموع ، بما في ذلك transition-property, transition-duration, transition-timing-function, and transition-delay. ليس كل هذه مطلوبة لبناء انتقال ، مع الثلاثة الأولى هي الأكثر شعبية.

في المثال أدناه ، سيغير المربع لونه background على مدار ثانية واحدة بطريقة linear.

.box {
 background: #2db34a;
 transition-property: background;
 transition-duration: 1s;
 transition-timing-function: linear;
}
.box:hover {
 background: #ff7b29;
}

معاينة-Preview

Vendor Prefixes

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

للإشارة ، سيبدو الإصدار السابق من الكود أعلاه كما يلي.

.box {
 background: #2db34a;
 -webkit-transition-property: background;
 -moz-transition-property: background;
 -o-transition-property: background;
 transition-property: background;
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-timing-function: linear;
 -moz-transition-timing-function: linear;
 -o-transition-timing-function: linear;
 transition-timing-function: linear;
}
.box:hover {
 background: #ff7b29;
}

Transitional Property

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

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

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

.box {
 background: #2db34a;
 border-radius: 6px
 transition-property: background, border-radius;
 transition-duration: 1s;
 transition-timing-function: linear;
 }
 .box:hover {
 background: #ff7b29;
 border-radius: 50%;
 }

معاينة-Preview

بقلم ‪Apple Egypt Expert‬‏

فقرة تضم نبذة عن الكاتب