advertise laitec sharif univercity استخراج بیت کوین با کامپیوتر استخراج بیت کوین با کامپیوتر
پروژه کامل مدیریت شرکت نرم افزاری با سی شارپ و SQL

پروژه کامل مدیریت شرکت نرم افزاری با سی شارپ و SQL

15000 تومان
دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

3000 تومان
دانلود پروژه مهندسی نرم افزار ، نمایندگی ایران خودرو

دانلود پروژه مهندسی نرم افزار ، نمایندگی ایران خودرو

3000 تومان
سیستم اتوماسیون دهیاری ، پروژه مهندسی نرم افزار

سیستم اتوماسیون دهیاری ، پروژه مهندسی نرم افزار

3000 تومان
پکیج ویژه پروژه پایانی و پایان نامه رشته کامپیوتر

پکیج ویژه پروژه پایانی و پایان نامه رشته کامپیوتر

45000 تومان

آموزش کار با انیمیشن در CSS 3

animationهای CSS3 ، اجازه میدهند که اکثر عناصر HTML، بدون استفاده از جاوا اسکریپت و flash،به تدریج از استایلی به استایل دیگری تغییر کنند.keyframe مشخص میکند که عنصر در زمان خاصی چه استایلی داشته باشد.
آموزش کار با انیمیشن در CSS 3

انیمیشن در CSS3

animationهای CSS3 ، اجازه میدهند که اکثر عناصر HTML، بدون استفاده از جاوا اسکریپت و flash، انیمیشن داشته باشند.

 

♦ animationهای CSS3 چه هستند؟

انیمیشن اجازه میدهد که یک عنصر به تدریج از استایلی به استایل دیگری تغییر کند.

شما میتوانید هر چند بار که خواستید خواص CSS را تغییر دهید.

برای استفاده از انیمیشن CSS3، باید ابتدا چند keyframe را برای انیمیشن مشخص کنید. keyframe مشخص میکند که عنصر در زمان خاصی چه استایلی داشته باشد.

 

♦ پشتیبانی مرورگر از انیمیشن ها

در زیر لیست اولین ورژن های مرورگرهایی را که برای بار اول به طور کامل انیمیشن را پشتیبانی کرده اند، یادآوری کرده ایم:

► مرورگر اینترنت اکسپلورر : نسخه 10.0

► مرورگر Chrome : ورژن 4.0

► مرورگر firefox : نسخه 16.0

► مرورگر Opera : ورژن 15.05.07

► مرورگر Safari : نسخه 4.0

 

♦ قانون @Keyframes

وقتی که شما استایل های CSS را داخل قانون @keyframes مشخص می کنید، انیمیشن به تدریج در زمانی که مشخص شده از استایل فعلی به استایل جدید تغییر می یابد.

برای دریافت یک تصویر متحرک، باید انیمیشن را به عنصر مرتبط کنید.

در مثال زیر، انیمیشن “example” را به عنصر “div” متصل می کند. طبق خواص تعیین شده، انیمیشن 4 ثانیه به طول می انجامد و به تدریج، رنگ عنصر div از قرمز به زرد تغییر می یابد. وقتی زمان animation تمام شد، به رنگ اصلی تبدیل می شود.

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

 

توجه داشته باشید، در صورتی که خاصیت animation-duration (زمان انیمیشن) تعیین نشده باشد، انیمیشن تاثیری نخواهد داشت، چرا که مقدار پیش فرض این خاصیت 0 است.

در مثال بالا، زمان تعیین شده برای تغییر استایل با  استفاده از کلمات کلیدی from و to مشخص شده است که نشان دهنده %0  (زمان شروع) و %100 (زمان پایان) می باشد.

این زمان را میتوان با استفاده از مقادیر درصدی نیز نشان داد. با استفاده از درصد نیز میتوانید هرچقدر تغییرات استایل را که خواستید، اضافه کنید.

مثال زیر، رنگ پس زمینه عنصر div را وقتی که انیمیشن %25 کامل، %50 کامل و دوباره وقتی انیمیشن %100 کامل شد، تغییر میدهد.

 

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

 

مثال زیر دو خاصیت رنگ پس زمینه و موقعیت عنصر div را وقتی که انیمیشن %25 کامل، %50 کامل و دوباره وقتی انیمیشن %100 کامل شد، تغییر میدهد.

 

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

 

 

♦ تاخیر یک انیمیشن

خاصیت animation-delay زمان تاخیر شروع یک تصویر متحرک را مشخص می نماید:

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

 

 

♦ تنظیم اجرای چندین بار یک انیمیشن

ویژگی animation-iteration-count در CSS3 مشخص میکند که یک انیمیشن چند بار پشت سر هم اجرا شود. اگر میخواهید تصویری برای همیشه متحک باشد، باید به این خاصیت مقدار " infinite" بدهید.

مثال زیر انیمیشن را سه بار قبل از توقف آن اجرا خواهد کرد:

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

 

♦ اجرای انیمیشن در جهت معکوس یا دوره های متناوب

خاصیت animation-direction اجازه میدهد که انیمیشن در جهت معکوس اجرا شود. اگر به این خاصیت مقدار " alternate" بدهید، بصورت یک در میان، به سمت جلو و سپس در جهت معکوس حرکت خواهد کرد. مقدار"reverse" نیز تصویر را مرتبا در جهت معکوس متحرک می سازد.

 

♦ مشخص کردن منحنی سرعت انیمیشن

خاصیت animation-timing-function، منحنی سرعت انیمیشن را مشخص می کند. این خاصیت مقادیر زیر را می تواند داشته باشد:

► ease : یک تصویر متحرک را با حرکت آهسته شروع میکند، سپس سریع، و بعد از آن با آرامی پایان می یابد. (این مقدار، مقدار پیش فرض خاصیت است).

► linear : یک انیمیشن را با سرعت ثابت از شروع تا پایان مشخص میکند.

► ease-in : انیمیشنی با شروع آهسته مشخص میکند.

► ease-out : تصویری متحرک با پایانی آهسته را نمایش می دهد.

► ease-in-out : انیمیشنی با شروع و پایان آهسته.

► (cubic-bezier(n,n,n,n : اجازه می دهد خودتان مقادیر را در تابع  cubic-bezier مشخص کنید.

 

مثال زیر برخی از منحنی سرعت های مختلف است که می تواند مورد استفاده قرار گیرد را نشان می دهد:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

 

♦ خاصیت مختصرنویسی animation

در مثال زیر از شش خاصیت انیمیشن عناصر استفاده شده است :

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

 

همان اثر انیمیشن بالا را میتوان با استفاده از خواص مختصرنویسی زیر داشت :

div {
    animation: example 5s linear 2s infinite alternate;
}

 

♦ ویژگیهای انیمیشن CSS3

در زیر لیست قوانین @keyframes و  تمام خواص انیمیشن را می بینید:

► خاصیت @keyframes : کد انیمیشن را مشخص میکند.

► animation : یک ویژگی مختصر نویسی برای تنظیم تمام خواص انیمیشن ( به جز animation-play-state و animation-fill-mode)

► animation-delay : تاخیر شروع یک تصویر متحرک را مشخص می نماید.

► animation-direction : تعیین میکند که تصویر در جهت معکوس اجرا شود و یا در یک دوره متناوب.

► animation-duration : تعیین میکند که چند ثانیه و یا میلی ثانیه طول میکشد تا یک چرخه انیمیشن کامل شود.

► animation-fill-mode : استایل عنصر را وقتی که انیمیشن اجرا نمی شود، تعیین میکند (وقتی تمام میشود و یا د زمان تاخیر انیمیشن).

► animation-iteration-count : تعداد دفعات اجرای انیمیشن را مشخص میکند.

► animation-name : نام انیمیشن @keyframes را مشخص می نماید.

► animation-play-state : تعیین میکند که انیمیشن در حال اجراست یا متوقف شده است.

► animation-timing-function : منحنی سرعت انیمیشن را مشخص میکند.          

 

 



2
نظرات
  • user avatar مهدی:
    ۱۱:۵۱:۴۳ __ ۱۳۹۶/۰۲/۰۱

    سلام.باریکلا .افرین .خسته نباشید .ممنون کارمونو راه انداختی .از این چیزا زیاد بزار. من قبلا فک میکردم واسه انیمیشن باید حتما از js استفاده کنیم ...

  • user avatar میلاد پاینده:
    ۰۰:۴۰:۱۸ __ ۱۳۹۶/۰۴/۱۹

    ممنون واقعا استفاده کردم از آموزش انیمیشن

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
اجرای انیمیشن در جهت معکوس یا دوره های متناوبتنظیم اجرای چندین بار یک انیمیشنتصاویر متحرک در CSS3آموزش استفاده از انیمیشن در سی اس اس3تاخیر انیمیشن در عناصر اچ تی ام الچگونه به عناصر HTML انیمیشن بدهیم؟ویژگیهای انیمیشن CSS3خاصیت animation-timing-function در CSS3animation in CSS3animationهای CSS3 چه هستند؟قانون keyframes در CSS3پشتیبانی مرورگر از انیمیشن هاخاصیت مختصرنویسی animationویژگی های animation در CSS3 لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

کسب درآمد با کامپیوتر
تولید بیت کوین با کامپیوتر

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php