[برمجة] شرح بسيط لخاصيتي 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 أجزاء من الثانية
وكرر الحركة مرتين
واجعل الحركة عكسية

إلى هنا إنتهى الدرس نلتقي في درس جديد أي استفسار اتركوه في تعليق

By glok

Similiar tagsCssinternetprogramation