دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » فیلم آموزش Animation ( متحرک سازی ) در CSS3
فیلم آموزش Animation ( متحرک سازی ) در CSS3 | وب سیتی

فیلم آموزش Animation ( متحرک سازی ) در CSS3

در این قسمت از فیلم آموزش CSS3 در مورد انیمیشن ها آموزش داده ایم . در این فیلم آموزش animation اول در مورد این که انیمیشن چیست و چرا از اون استفاده می کنیم توضیحاتی رو داده ایم و سپس نحوه استفاده از اون رو آموزش داده ایم .

Animation ( انیمیشن ) چیست ؟

انیمیشن یا متحرک سازی این امکان رو در css به ما میده که استایل عناصر رو به تدریج از حالتی به حالتی دیگر تغییر بدیم . شما می تونید اکثر ویژگی های CSS رو با استفاده از انیمیشن در زمان مشخصی که می خواید تغییر بدید .

برای اینکه بتونید یک انیمیشن واسه اون عنصری که میخواید درست بکنید باید تغییرات ویژگی های اون رو در یک  keyframes@  تعریف بکنید و از اون فریم های کلیدی استفاده بکنیم . در استفاده از این keyframes از انتخابگر های from و to استفاده می کنیم که from برای حالت اولیه است و to برای حالتی است که می خواهیم عنصر مورد نظر اون ویژگی هارو داشته باشه .

کد CSS زیر رو مشاهده بکنید :

برای هر keyframes باید یک اسم مشخص بکنید و اون اسم رو هم با استفاده از ویژگی animation-name به اون عنصر مورد نظر بدید تا انیمیشن شما اجرا بشه .

ویژگی animation-duration :

 این ویژگی مشخص کننده زمان اجرای انیمیشن است که شما می توانید برای اجرای هر انیمیشن خود بر حسب ثانیه زمان مشخص بکنید .

ویژگی animation-delay : این ویژگی در انیمیشن میزان تاخیر رو مشخص می کنه . برای مقدار دادن به اون هم می تونید از ثانیه استفاده بکنید .  بقیه ویژگی ها رو می تونید در فیلم آموزش animation مشاهده بکنید که کامل توضیح داده شده است .

کد HTML :

کد CSS :

اگر کدهای بالا را اجرا کنید یک انیمیشن ساده را ملاحضه می کنید که در فیلم آموزش animation به صورت کامل آن را توضیح داده ایم .

در جلسه قبل هم که آموزش Transition رو گفته بودم می تونید از اون استفاده کنید و زیبایی صفحه وب خودتون رو دو چندان کنید .

نکات بیشتر در فیلم آموزش Animation توضیح داده شده است .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *