advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود پروژه وب سایت هتل با HTML و ASP.NET

دانلود پروژه وب سایت هتل با HTML و ASP.NET

4900 تومان
دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

3000 تومان
سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

3000 تومان
دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

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

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

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

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

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

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