این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)

تاکنون با سایت هایی مواجه شده اید که از انیمیشن هایی در صفحه وب سایت خود استفاده می کنند. در این مقاله مقدمات نحوه استفاده از انیمیشن در CSS را یاد خواهیم گرفت، سپس با ذکر چند مثال عملی آموزش را ادامه خواهیم داد.

نحوه استفاده از انیمیشن در CSS

برای اینکه بتوانید از انیمیشن ها در CSS استفاده کنید نیاز است که در ابتدا یک نامی را برای انیمیشن خود انتخاب کنید. سپس انیمیشن را به یک عنصر در CSS نسبت دهیم:

.example {
    animation-name:TuTsxen;
}

طبق کد بالا، برای کلاس example یک انیمیشنی با نام TuTsxen ایجاد شده است. در مرحله بعد باید سراغ تعریف این انیمیشن با استفاده از کلمه کلیدی @keyframes برویم.

@keyframe در CSS چیست؟

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

@keyframes TuTsxen {
    0%{ }
    25%{ }
    50%{ }
    75%{ }
}

طبق کد بالا، ما برای انیمیشن خود 5 مرحله اجرای مجزا مشخص کرده ایم. این درصد ها مشخص میکنند که به طور مثال در ابتدای کار و زمان اولیه 0% چه اتفاقی بیفتد. بعد از 20% از گذشت انیمیشن چه اتفاقی بیفتد و به همین ترتیب تا مرحله آخر انیمیشن خود را تعریف می کنیم.

فرض کنید که مربعی ساخته ایم، در مرحله صفر تا 100 درصد در محل های مشخص شده ای که داریم باشد و رنگ آن نیز در هر منطقه ای که می رود تغییر بکند. برای این کار کد زیر را باید بزنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>تاتژن</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: Tutsxen;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes Tutsxen {
    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;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

تفسیر کد نوشته شده: همانطور که مشاهده می کنید در تگ body فقط یک div قرار داده ایم و در بخش استایل و به کمک css عرض و ارتفاعی مشخص به آن داده ایم. سپس در مرحله های مشخص، مربع را در مکان های مشخص قرار داده ایم و رنگ بک گراند آن را نیز تغییر داده ایم. همچنین عبارت animation-duration: 5s بیان می کند که طول اعمال این انیمیشن چه مقدار باشد و عبارت animation-iteration-count: infinite بیان کننده ی تعداد دفعاتی است که انیمیشن اجازه تکرار را دارد.

خب به پایان آموزش ایجاد انیمیشن در CSS رسیدیم. امیدواریم این آموزش مورد توجه شما واقع شده باشد. در جلسات آینده درباره بقیه توابع موجود در این بخش و کارایی آنها با هم بحث خواهیم کرد. اگر به آموزش های CSS علاقه مند هستید کانال یوتیوب تاتژن را دنبال کنید.

مهندس محسن حسن پور

برنامه نویس | طراح سایت | متخصص سئو

انیمیشن ها در css

مهندس محسن حسن پور

نحوه استفاده از انیمیشن در CSS

@keyframe در CSS چیست؟

مهندس محسن حسن پور