الحركه مع css سواء كانت ثلاثيه الأبعاد أو في بعدين تتبع نفي المبادئ الأساسيه. في هذه المقالة ، سوف نتخذ خطواتنا الأولى مع الرسوم المتحركة CSS، والنظر في الخطوط العريضةلإنشاء الرسوم المتحركة مع CSS. وسوف نعمل من خلال على سبيل المثال ،في بناء حركه بالملامح الأساسيه للرسوم المتحركه وبناء هذه الحركه علي ملامح من الحياه الواقعيه.

خصائص الرسوم المتحركة بـ CSS

الرسوم المتحركة هي خاصية CSS جديدة تقوم بعمل الرسوم المتحركة من أهم عناصر HTML (مثل H1 ) بدون جافا سكريبت أو فلاش

كل ما تحتاجه للحصول على بعض الرسوم المتحركة CSS يحدث هو ​​أن نترجم الحركه بـ CSS :

[html] /* This is the animation code. */
@-webkit-keyframes example {
from { transform: scale(2.0); }
to { transform: scale(1.0); }
}

/* This is the element that we apply the animation to. */
div {
-webkit-animation-name: example;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease; /* ease is the default */
-webkit-animation-delay: 1s; /* 0 is the default */
-webkit-animation-iteration-count: 2; /* 1 is the default */
-webkit-animation-direction: alternate; /* normal is the default */
}
[/html]

وعند عمل الحركه نفسها يمكنك بعد ذلك أن تقوم بإضافه تأثيرات عليها أو تكرارها

[html] div {
-webkit-animation: example 1s ease 1s 2 alternate;
}
[/html]

تطبيق المبادئ التقليدية للرسوم المتحركة

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