بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.
إليكم تلميحاً سريعاً في الحركة الانتقالية CSS3 Transitions وهي الفرق بين استخدام الحركة الانتقالية (وأعني باستخدامها مكان وضع الكود)في الوضع العادي {}div أم في وضع مرور الماوس {}div:hover سنطبق الحركة على الصندوقين بالأسفل. سنعطي الصندوقين أسماء تعريفية مختلفة ID سيكون للصندوق الأول (square1) وللثاني (square2) ونضيف لهما وضع مرور الماوس :hover.سنأخذ كود الحركة من موقع css3please.com حيث سنقوم بنسخ كود الحركة الموجود داخل {}box_transition. ونلاحظ الفرق في الحركة الانتقالية عند استخدامها مع الوضع العادي أو في وضع الـ :hover.
.box{/* هذا هو الشكل العام لكلا الصندوقين*/ display:inline-block; background-color:brown; color:white; padding:10px; margin-right:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #square1{ /* كود الحركة الانتقالية */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #square1:hover{ background-color:green; } #square2{} // :hover نلاحظ كود الحركة موجود في #square2:hover{ background-color:green; /* كود الحركة الانتقالية */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
نلاحظ أن استخدام كود الحركة مع الوضع العادي normal state يسمح بالحركة الانتقالية بالاتجاهين أي عند مرور الماوس و خروجه،أما وضع الكود داخل وضع الـ :hover فهو يسمح بالحركة فقط باتجاه واحد.
كانت هذا تلميحاً سريعاً نتمنى أن يكون مفيداً.
ودمتم..
وصلى اللهم و سلم وبارك على سيدنا محمد و على آله و صحبه و سلم تسليما كثيرا إلى يوم الدين والحمدلله رب العالمين