شرح شامل لخاصية transition و animation في css3

شرح شامل لخاصية transition و animation في css3

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
شرح خاصية transition و animation في css3 :
في هذا الدرس والخاص بلغة css3 سأشرح لكم خاصيتين transition و animation , طبعا لغة css3 لغة رائعة تضيف ميزة الحيوية والتنسيق والجمال لمواقعكم وهي لغة أساسية وخاصيتي transition و animation خاصيتين رائعتين حيث تمكنك من إضافة الحركية والحيوية لموقعكم .

شرح عنصر transition :

هذا العنصر لديه أربع خصائص :

• transition-property
•  transition-duration
•  transition-timing-function 
•  transition-delay

وهذا شرح لهذه الخصائص :

transition-property
لتحديد ماهية التأثير الذي سيطبق على العنصر مثلاً :
width/height/left:10px/color ..etc

transition-duration
حساب مدة تنفيذ حركة العنصر

transition-timing-function : linear / ease / ease-in /ease-in-out /
التأثير على العنصر في مدة تنفيذ حركتة

transition-delay
المدة التي تريد معها بدأ الحركة

هذا مثال توضيحي:

a {
   color: #000;
   transition-property: color;  /*هنا إخترنا التأثير على اللون*/
   transition-duration: 0.7s;  /*حساب مدة التنفيذ*/
   transition-delay: 0.3s;  /*الفترة الزمنية التي يبدأ معها التأثير*/
   transition-timing-function: ease-in;  /*طريقة التأثير*/
}
a:hover {
   color: #eee
}

شرح عنصر animation :

هي (القيم) التي تضعها على العنصر المراد تطبيق الحركة علية
هذه هي خصائصه :

animation-timing-function : linear/ease/ease-in/ease-out/ease-in-out

animation-timing-function : linear
تطبيق سرعة واحدة على العنصر من في البدء والإنتهاء

animation-timing-function : ease
بداية بطيئة ثم سرعة ثم عودة للوضع البطئ

animation-timing-function : ease-in
بداية بطية لحركة العنصر

animation-timing-function : ease-out
نهاية بطيئة لحركة العنصر

animation-timing-function : ease-in-out
بداية بطيئة ونهاية بطيئة

animation-iteration-count : value | infinite
عدد مرات تكرار الحركة على العنصر
infinite الى مالانهاية
animation-direction: alternate | normal ;
عندما ينتهي التأثير لايبدأ من جديد من إنما يعكس الإتجاة - دورة تبديلية عكسية
animation-delay: 1s;
المدة التي تريد معها بدأ الحركة

وهذا مثال توضيحي :

div {
   animation-name: move; /*تختار أسم معين لربطه بـ keyframes*/
   animation-duration: 1s; /*مدة تنفيذ الحركة*/
   animation-timing-function: ease-in-out; /*طريقة التنفيذ*/
   animation-delay: 0.5s; /*المدة التي تريد معها بدأ الحركة*/
   animation-iteration-count: 2; /*عددمرات التكرار */
   animation-direction: alternate; /*عندما ينتهي التأثير لايبدأ من جديد من إنما يعكس الإتجاة - دورة تبديلية عكسية */
   background-color: red;
   height: 350px;
   width: 350px; 
   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;
   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}
@keyframes move {
   from {
      transform: scaleX(0);
   }
   to {
      transform: scaleX(100px);
   }
}
@-moz-keyframes move {
   from {
      -moz-transform: scaleX(0);
   }
   to {
      -moz-transform: scaleX(100px);
   }
}
@-webkit-keyframes move {
   from {
      -webkit-transform: scaleX(0);
   }
   to {
      -webkit-transform: scaleX(100px);
   }
}
animation: move 1s ease-in-out 0.5s 2 alternate;

في هذا المثال طبقنا الحركة التالية على div معين
مدة التنفيذ 1 ثانية
طريقة التنفيذ : بداية بطيئة ونهاية بطيئة
نفذ الحركة بعد 5 أجزاء من الثانية
وكرر الحركة مرتين
واجعل الحركة عكسية