مای دیزاین را همراه با آموزش های جدید در سایت طوسی دنبال کنید: http://tooc.ir
آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
ایجاد انیمشین با استفاده از CSS

ایجاد انیمشین با استفاده از CSS
سلام. یکی از ساده ترین روش های زیبا سازی سایت استفاده از انیمیشن در آن است اما این کار باعث سنگین شدن سایت میشود. اما با استفاده از CSS شما میتوانید انیمیشن هایی سبک ایجاد کنید.
قاعده کلی کد به صورت زیر است (animname نام انیمیشنی است که مسازید) :

@keyframes animatname {
	۰% {css-styles;}
	۵۰% {css-styles;}
	۱۰۰% {css-styles;}
}

شما میتوانید به تعداد زیادی استایل را در زمان های مختلف ایجاد کنید. در کد بالا من فقط در سه زمان کاری را انجام میدهم. در مقابل هر قسمت باید کد سی اس اس مورد نظر رو بنویسیم.
برای مثال شما میخواهید رنگ زمینه ابتدا آبی، سپس قرمز و در پایان سبز باشد باید کد را به صورت زیر بنویسیم:

@keyframes animatname {
	۰% {background: blue;}
	۵۰% {background: red;}
	۱۰۰% {background: green;}
}

این کد نیز مانند بقیه کد های CSS3 باید برای مرورگر ها دیگر هم با نوشته شود (moz و webkit) که در پایان کامل کد را در یک مثال مینویسم.
برای فراخوانی این انیمیشن باید کد زیر رو به کلاس یا آی دی اضافه کنید (این کد نیز باید برای webkit نوشته شود) :

animation:animname 5s infinite;

حال همان مثال بالا را به صورت کامل:

@keyframes animatname {
	۰% {background: blue;}
	۵۰% {background: red;}
	۱۰۰% {background: green;}
}
@-moz-keyframes animatname {
	۰% {background: blue;}
	۵۰% {background: red;}
	۱۰۰% {background: green;}
}
@-webkit-keyframes animatname {
	۰% {background: blue;}
	۵۰% {background: red;}
	۱۰۰% {background: green;}
}

.
.
.

.class {
	animation:animname 5s infinite;
}

Animation مقادیر دیگری نیز دارد که در آموزش بعدی به صورت کامل به توضیح آن خواهیم پرداخت.
قسمت دوم آموزش “ایجاد انیمشین با استفاده از CSS (بخش دوم)” قرار داده شد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
مجموعه آیکون های آب و هوا
طرح لایه باز اختصاصی لوگوی آندروید
نمایش خلاصه متن مطلب در وردپرس
اکشن ساخت سایه طولانی ( flat design )
آموزش ساخت استایل در فتوشاپ
مجموعه عظیم آیکون های کاربردی (سری ششم)