انتقال CSS

انتقال CSS ویژگی های متحرک را تنظیم می کند ، هم چنین زمان شروع انیمیشن ها، مدت زمان دوام و سرعت آن ها را نیز تنظیم میکند. (به عنوان مثال ، در ابتدا آهسته ، در پایان سریع).

ایجاد انیمیشن با انتقال CSS

انتقال CSS با تغییر خصوصیات یک ظاهر طراحی شده در عناصر HTML ، یک اثر انیمیشن ایجاد می کند. جابجایی بین یک بلوک از خواص به بلوک دیگر به طور ناگهانی و در طی یک دوره زمانی اتفاق نمی افتد.

این مثال از CSS3 ویژگی Opacity را انتقال می دهد. عنصر <div> در ابتدا جامد است. هنگامی که روی عنصر می روید ، میزان تیرگی به 0.5 تغییر می کند.

div {
 width: 200px;
 height: 200px;
 background: #5d088e;
 color: white;
 padding: 5px;
 opacity: 1;
 -webkit-transition: opacity 5s; /* Safari browser */
 transition: opacity 5s;
}

div:hover {
 opacity: 0.5;
}

div {
    width: 200px;
    height: 200px;
    background: #5d088e;
    color: white;
    padding: 5px;
    -webkit-transition: width 5s; /* Safari browser */
    transition: width 5s;
}
div:hover {
    width: 500px;
}

• در این مثال ، ما یک عنصر 200px * 200px بنفش <div> داریم.
• عنصر <div> همچنین دارای یک اثر انتقال مشخص شده با خصوصیت width است.
• مدت زمان اثر پنج ثانیه است.
• انتقال وقتی اتفاق می افتد که ویژگی عرض شروع به تغییر عرض می کند.
• وقتی ویژگی را روی عنصر قرار می دهید ، مقدار ویژگی عرض جدید شروع می شود.

انتقال کوتاه

انتقال مختصر CSS می تواند چهار ویژگی را در یک اعلامیه تنظیم کند:

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

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0.5s;
}

در این مثال ، مختصر انتقال کلیه خصوصیات موجود را در یک اعلان تعریف می کند:

div {
    transition: width 1s ease 1s;
}

همچنین می توانید چندین انتقال CSS را در یک بلوک اعلان مشخص کنید.

این مثال انتقال CSS را به چند ویژگی تبدیل می کند: هم ارتفاع و هم عرض (طول ارتفاع – 4 ثانیه ، در حالی که عرض – 2 ثانیه):

div {
    -webkit-transition: width 2s, height 4s; /* For Safari */
    transition: width 2s, height 4s;
}

منحنی سرعت

ویژگی عملکرد-زمان بندی-منحنی سرعت انیمیشن را تعریف می کند. شما می توانید تصمیم بگیرید که آیا انتقال CSS در ابتدا ، وسط ، انتها و غیره سریعتر است یا کندتر.

این مثال منحنی های سرعت متفاوتی را نشان می دهد:

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

تأخیر اثر

تاخیر گذارCSS3 تعیین می کند که آیا مدتی باید بگذرد تا اثر گذار اتفاق بیفتد. خاصیت ثانیه هایی به عنوان مقادیر دارد.

در این مثال ، یک ثانیه تأخیر وجود دارد قبل از اینکه انتقال CSS اتفاق بیفتد:

div {
    -webkit-transition-delay: 1s; /* For Safari */
    transition-delay: 1s;
}

انتقال و تحول

CSS تبدیل عناصر کنترل را با ایجاد چرخش ، انحراف و غیره به عناصر کنترل تغییر می دهد. بنابراین ، برای ایجاد یک عنصر چرخان ، این مثال را دنبال کنید:

div {
    -webkit-transition: width 5s, height 5s, -webkit-transform 5s; /* For Safari */
    transition: width 5s, height 5s, transform 5s;
}

نکات مهم انتقال CSS:

• همه ویژگی های CSS قابل انیمیشن نیستند. این لینک را برای یافتن لیست کاملی از خصوصیاتی که ویژگی انتقال CSS قبول می کند بررسی کنید.
• استفاده از انتقال CSS می تواند مبتدیان را از استفاده از JavaScript برای ایجاد انیمیشن های ساده نجات دهد.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.