advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود پروژه پایانی طراحی وب سایت مخابرات با Asp.net

دانلود پروژه پایانی طراحی وب سایت مخابرات با Asp.net

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

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

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

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

3000 تومان
دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

18000 تومان
دانلود آپلود سنتر پیشرفته با PHP و Ajax

دانلود آپلود سنتر پیشرفته با PHP و Ajax

3000 تومان

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

سفارش پروژه در سورس کد

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

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