الاثنين، 16 مارس 2015

مجموعة من تأثيرات الأنيميشن رائعة بلغة CSS3


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


طريقة إضافة خاصية الأنيميشن إلى مدونتكم :
أولا ابحث عن ;
<head>
أضف فوقه التالي :
<link href='https://dl.dropboxusercontent.com/u/280199022/animated_by_mtawroon.css' media='all' rel='stylesheet' type='text/css'/>  <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
الأن ابحث عن :
*/]]></b:skin>
اضف فوقه الكود التالي :
.ID {  
    -webkit-animation-duration: 3s;  
    -webkit-animation-delay: 2s;  
    -webkit-animation-iteration-count: 22;  
}
مع تغيير كلمة .ID باسم الوسم الموجود في الديف.
الأن لكي تضيف الخاصية على إضافة معينة عليك أن تضيف الكود التالي إلى وسم الإضافة :
animated tada
وهذا توضيح لنقل أن هذا هو الوسم الذي سأضيف له خاصية الأنيميشن
<div class='mtawroon'>
إذن سوف أضيف له animated tada ليصبح على الشكل التالي :
<div class='mtawroon animated tada'>
وهكذا نكون قد أضفنا له الخاصية.
ملحوظة : كلمة tada تدل على نوع الأنيميشن لذلك يمكنك تغييره بالكثير من الأنيميشن وهي كالتالي :
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
إلى هنا انتهى الدرس أتمنى أن أكود قد أفدتكم إلى اللقاء
مرسلة بواسطة في
التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)