انیمیشن در CSS به صفحات HTML شما زیبایی خاص و منحصر به فردی میبخشند و به شما کمک میکنند تا کاربران را مجذوب سایت خود کنید. CSS به شما این امکان را میدهد تا بدون نیاز به درگیرشدن با کدها و کتابخانههای پیچیدهی جاوا اسکریپت و تنها با استفاده از HTML و CSS، انیمیشنهایی زیبا تولید کنید. انیمیشنها میتوانند بین کاربران و سایت شما، تعامل و بازخوردی ارزشمند ایجاد کنند، تجربهی هیجانی را تقویت کنند و پویایی و حس زندهبودن را برای سایت شما به ارمغان بیاورند. امروزه استفاده از انیمیشن در سایتها نسبت به گذشته بسیار بیشتر شده است؛ چه در قالب کدهای جاوا اسکریپت، WEBGL، SVG، GIF و یا کدهای CSS. ما در این مقاله قصد داریم شما را با چند نمونه از انیمیشن در CSS آشنا کنیم؛ با ما همراه باشید.
روشهای ساخت انیمیشنهای زیبا و جذاب CSS
انیمیشنهای CSS از دو بلوک اصلی ساختمان ساخته میشوند. Keyframes - مراحل و استایلهای انیمیشن در CSS را تعریف میکند. keyframes - Animation Properties@ را به یک عنصر مشخص اختصاص میدهد و نحوه انجام انیمیشن آن را تعریف میکند. بیایید نگاهی به آنها بیندازیم. بیشتر بدانیم: آموزش جامع CSS Grid
بلوک #1: keyframes@
Keyframes پایه و اساس انیمیشن در CSS است. آنها تعریف میکنند که انیمیشن در هر مرحله از جدول زمانی انیمیشن چگونه به نظر برسد. هر keyframes از این موارد تشکیل شده است: نام انیمیشن در CSS : نامی است که انیمیشن را توصیف میکند، به عنوان مثال bounceIn. مراحل انیمیشن در CSS : هر مرحله از انیمیشن به صورت درصدی نمایش داده میشود. 0٪ حالت اولیهی انیمیشن را نشان میدهد. 100٪ نمایانگر وضعیت پایان انیمیشن است. حالتهای میانه را نیز میتوان در بین آنها افزود. CSS Properties: خصوصیات CSS برای هر مرحله از جدول زمانی انیمیشن تعریف شده است. بیایید نگاهی به یک keyframe ساده به نام "bounceIn" بیندازیم. این keyframe سه مرحله دارد. در مرحلهی اول (0٪) ، عنصر در opacity 0 قرار دارد و با استفاده از مقیاس transform در CSS، تا 10 درصد از اندازهی پیش فرض آن کاهش مییابد. در مرحلهی دوم (60٪) این عنصر به تاری کامل رسیده و تا 120 درصد از اندازه پیش فرض آن رشد میکند. در مرحلهی نهایی (100٪)، scale کمی پایین میآید و به اندازهی پیش فرض خود باز میگردد. keyframes@ به پروندهی اصلی CSS شما اضافه میشود.
همانطور که مشاهده میکنید، ترکیب transform در CSS انیمیشنها، همان جایی است که جادو اتفاق میافتد.
بلوک #2: ویژگیهای انیمیشن
پس از تعریف keyframes، ویژگیهای انیمیشن باید به منظور عملکرد انیمیشن شما اضافه شوند. این ویژگیها keyframes را به عناصر مورد نظر شما اختصاص داده و چگونگی انجام انیمیشن در CSS را تعریف میکنند. برای عملی شدن انیمیشن باید دو ویژگی انیمیشن زیر را اضافه کنید: animation-name: نام انیمیشن، تعریف شده در keyframes. animation-duration: مدت زمان انیمیشن، در چند ثانیه (به عنوان مثال، 5 ثانیه) یا میلی ثانیه (به عنوان مثال، 200ms). در ادامهی مثال بالا، به عنوان نمونه، نام انیمیشن و مدت زمان انیمیشن را به صورت زیر به تگهای div که میخواهیم آنها را متحرک کنیم، اضافه خواهیم کرد.
div {
animation-duration: 2s;
animation-name: bounceIn;
}
سینتکس کوتاه شده:
div {
animation: bounceIn 2s;
}
با اضافه کردن keyframes و ویژگیهای انیمیشن، یک انیمیشن ساده به صورت زیر خواهیم داشت.
خلاصهنویسی ویژگیهای انیمیشن در CSS
هر خاصیت انیمیشن را میتوان به صورت جداگانه تعریف کرد، اما برای کدنویسی تمیز و سریعتر، توصیه میشود از خلاصهنویسی ویژگیها استفاده کنید. بدین ترتیب تمامی خصوصیات انیمیشن به آن انیمیشن اضافه میشوند. ویژگیها به ترتیب زیر نوشته میشوند:
نکته: به یاد داشته باشید به منظور این که انیمیشن در CSS به نحوی صحیح عمل کند، میبایست دستورالعمل مناسب را دنبال کرده و حداقل دو مقدار اول را مشخص کنید.
نکتهای در رابطه با پیشوندها (Prefixes)
برای استفاده از animation ، keyframes و transition از نسخهی webkit-prefixed- استفاده میکنند.
Keyframes و animations با WebKit prefixes:
div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
برای اطمینان از اجرا شدن انیمیشنهای شما در تمامی مرورگرها، میتوانید از Bourbon، یک کتابخانهی Sass mixin که تمامی پیشوندهای به روز تمامی مرورگرهای مدرن را به صورت خودکار به کدهای شما اضافه میکند، استفاده کنید. نحوهی تولید پیشوند برای تمامی animations و keyframes با استفاده از Bourbon به صورت زیر است.
div {
@include animation(bounceIn 2s);
}
@include keyframes(bouncein) { /* styles */}
ویژگیهای اضافی انیمیشن در CSS
علاوه بر ویژگیهای مورد نیاز و الزامی مانند نام و مدت زمان انیمیشن، میتوانید با استفاده از ویژگیهای زیر، انیمیشنهای پیچیدهی دیگری را تنظیم و ایجاد کنید.
این ویژگی، منحنی سرعت یا سرعت انیمیشن در CSS را تعریف میکند. شما میتوانید زمانبندی را با گزینههای از پیش تعریف شده، مشخص کنید: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit (و یا برای استفاده از گزینههای پیشرفتهتر زمانبندی، میتوانید توابع زمانبندی سفارشی را با استفاده از cubic-bezier curve ایجاد کنید). مقدار پیشفرض این ویژگی، ease در نظر گرفته میشود که با سرعت کم شروع شده، سپس سرعت آن افزایش یافته و در پایان نیز کاهش مییابد. سینتکس CSS:
به شما این امکان را میدهد تا تعیین کنید که چه زمان انیمیشن (یا بخشهایی از آن) شروع میشود. یک مقدار مثبت (مانند 2s) انیمیشن را 2 ثانیه بعد از شروع آن شروع میکند. این عنصر تا آن زمان باقی خواهد ماند. مقدار منفی (مانند 2s-) انیمیشن را یکباره شروع میکند اما در ثانیه 2 وارد انیمیشن میشود. نکته: مقدار در ثانیه (s) یا میلی ثانیه (mil) تعریف میشود. سینتکس CSS:
تعداد دفعات پخش انیمیشن را مشخص میکند. مقادیر ممکن عبارتند از: # - تعداد مشخصی از تکرارها (پیش فرض 1 است). infinite - انیمیشن برای همیشه تکرار میشود. initial - تعداد تکرار را به مقدار پیشفرض تنظیم میکند. inherit - ارزش را از والدین به ارث میبرد. سینتکس CSS:
مشخص میکند که آیا انیمیشن باید به طرف جلو، چرخشی یا چرخههای متناوب اجرا شود. مقادیر ممکن عبارتند از: normal (پیشفرض) - انیمیشن به جلو پخش میشود. در هر چرخه، انیمیشن به حالت اولیه (0٪) باز شده و دوباره پخش میشود (تا 100٪). reverse - انیمیشن به عقب پخش میشود. در هر چرخه، انیمیشن به حالت انتهایی (100٪) باز میگردد و به عقب پخش میشود (تا 0٪). alternate - انیمیشن در هر چرخه جهت را معکوس میکند. در هر چرخهی فرد، انیمیشن به جلو (0٪ تا 100٪) پخش شده و در هر چرخهی زوج، انیمیشن به عقب پخش میشود (100٪ تا 0٪). alternate-reverse - انیمیشن در هر چرخه جهت را معکوس میکند. در هر چرخهی فرد، انیمیشن به صورت معکوس (100٪ تا 0٪) پخش شده و در هر چرخهی زوج، انیمیشن به جلو (0٪ یا 100٪) پخش میشود. سینتکس CSS:
مشخص میکند که استایلهای انیمیشن، قبل یا بعد از پخش انیمیشن قابل مشاهده هستند یا خیر. این ویژگی کمی گیجکننده است، اما یک بار که آن را درک کنید، برایتان بسیار مفید خواهد بود. به طور پیشفرض، انیمیشن قبل یا پس از شروع انیمیشن روی استایلهای عنصر تأثیر نمیگذارد (در صورت وجود تأخیر در انیمیشن). مقادیر ممکن عبارتند از: backwards - قبل از انیمیشن (در طول تاخیر در انیمیشن)، استایلهای keyframe اولیه (0٪) بر روی عنصر اعمال میشود. Forward - پس از اتمام انیمیشن، استایلهای تعریف شده در keyframe نهایی (100٪) توسط عنصر حفظ میشوند. both - انیمیشن قوانین را برای هر دوی backwards و Forward رعایت میکند و ویژگیهای انیمیشن را قبل و بعد از انیمیشن گسترش میدهد. normal (پیش فرض) - انیمیشن هیچ استایلی را برای عنصر، قبل یا بعد از انیمیشن اعمال نمیکند. سینتکس CSS:
مشخص میکند که آیا انیمیشن در حال پخش است یا مکث. از سرگیری یک انیمیشن متوقف شده، انیمیشن را از جایی که متوقف شده اجرا میکند. مقادیر ممکن عبارتند از: playing - انیمیشن در حال اجرا است. paused - انیمیشن در حال حاضر متوقف شده است. مثال
.div:hover {
animation-play-state: paused;
}
اجرای انیمیشنهای متعدد بر روی یک عنصر
برای افزودن چندین انیمیشن به یک selector، میتوانید به سادگی مقادیر را با کاما از هم جدا کنید. به عنوان مثال:
.div {
animation: slideIn 2s, rotate 1.75s;
}
انیمیشن متن در CSS
شما میتوانید به راحتی و با استفاده از کدهای HTML ،CSS و در برخی موارد JavaScript، جلوهها و انیمیشنهای جذابی را بر روی متون خود اعمال کنید. برای نمونه:
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml2 .letter',
scale: [4,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 950,
delay: (el, i) => 70*i
}).add({
targets: '.ml2',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
جمعبندی
با یادگیری ویژگیهای بالا و ترکیب آنها میتوانید انیمیشنهای بیشماری را ایجاد کنید. بهترین روش برای یادگیری این انیمیشنها، تمرین و ترکیب ویژگیهای مختلف است. برای یادگیری بیشتر همچنین میتوانید از منابع زیر استفاده کنید:
Upcase for Designers - یک جامعهی یادگیری آنلاین با دورههایی در زمینهی طراحی و تکنیکهای توسعه فرانت-اند.
CodePen – یک ویرایشگر آنلاین کدهای تحت وب، که میتوانید کدهای خود را در آن نوشته و بلافاصله نتایج را مشاهده کنید.
Animate.css – کتابخانهای با دهها انیمیشن سرگرمکننده برای شروع به یادگیری و استفاده در پروژههای شما.
آیا شما در کدنویسی قالب وبسایت یا پروژههای خود از انیمیشن در CSS استفاده میکنید؟ خوشحال میشویم نظرات خود را با ما به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل میشوی که آمادهی استخدام ، دریافت پروژه و کسب درآمد هستی.
۲۷ دیدگاه
nina۱۷ مهر ۱۴۰۲، ۱۸:۳۹
سلام م وقت بخیر. بسیار عالی و کاربردی توضیح دادید. ممنونم ازتون
یک سوال: بک گراندهدر سایت من ترنسپرنت هست و پوزیشن هدر فیکس هست.
من میخوام با شروع اسکرول هدر به صورت گرادیانت بک گراند سفید بگیره شبیه این سایت https://kstc.ir/
اگر امکانش هست راهنمایی بفرمایید
نازنین کریمی مقدم۲۴ مهر ۱۴۰۲، ۰۵:۴۷
درود
میتونید از این کدپن ایده بگیرید: https://codepen.io/atomiks/pen/dgMNwG
۲۸ تیر ۱۴۰۲، ۰۰:۱۳
درود
امکانش هست انمیشنهای گرافیکی هاور رو توضیح بدید.
سپاس از سایت خوبتون
نازنین کریمی مقدم۱۵ مرداد ۱۴۰۲، ۱۰:۲۹
درود
مقاله <a href="https://7learn.com/blog/css-hover-effect" target="_blank" rel="noopener nofollow ugc">hover در css</a> رو بررسی کنید کامل توضیح داده شده.
رضا۲۳ مهر ۱۴۰۰، ۱۷:۰۴
با سلام
خیلی ممنون از سایت بی نظیر تون
عالی بود?
میشه آموزش loader با css را هم یاد دهید
سپاس از شما
نازنین کریمی مقدم۲۳ مهر ۱۴۰۰، ۲۲:۴۹
درود
با توجه به حجم کاری مون احتمالا فعلا به سراغش نمیریم. اما میتونید به <a href="https://www.w3schools.com/howto/howto_css_loader.asp" target="_blank" rel="noopener nofollow ugc">آموزش ساخت loader در سایت w3schools</a> مراجعه کنید تا جواب سوالتون رو بگیرید.
Ali۲۰ مهر ۱۴۰۰، ۱۸:۴۰
سلام
عالی بود
میشه آموزش لود شدن صفحه اول یک سایت را هم آموزش دهید
سامان ملک پور۱۰ مهر ۱۴۰۰، ۱۰:۰۵
سلام
میخواستم بدونم به چه صورت میشه یک دکمه بالا و پایین کرد با هاور موس
منظورم اینه مثلا اون دکمه بعد از هاور یک انیمیشن بگیره که 20Px بره بالا 20Px بیاد پایین و تا زمانی که موس روش هستش تکرار بشه.
نازنین کریمی مقدم۱۰ مهر ۱۴۰۰، ۱۱:۳۰
درود
شما میتونید بخش "کد ایجاد افکت حرکتی بر روی عکس در html" در مقاله <a href="https://7learn.com/programming/html-css/css-hover-effect" rel="noopener" target="_blank">آموزش hover در CSS - افکتهای زیبا hover با CSS</a> رو مطالعه کنید.
Sepehr۰۲ شهریور ۱۴۰۰، ۰۷:۰۷
سلام من میخوام بدونم چجوری کاری کنیم که مثلا شکلمون بالا و پایین بشه؟و جلو و عقب
نازنین کریمی مقدم۱۳ شهریور ۱۴۰۰، ۱۸:۰۹
درود
بابت تاخیر در پاسخگویی عذرخواهی میکنم،
برای بالا و پایین کردن و یا جلو و عقب، شما باید با مختصات کار کنید. میتونید<a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction" target="_blank" rel="noopener nofollow ugc"> این مثال</a> رو ببینید تا بهتر روالش رو متوجه بشید.
محمد مهدی۰۶ مرداد ۱۴۰۰، ۱۸:۰۵
سلام متن خوبی بود
فقط یه سوال چه جوری میتونم تنظیم کنیم این انیمیشن با کلیک بر روی دکمه شروع به اجرا شدن کند نه از زمان لود صفحه ممنون
نازنین کریمی مقدم۰۷ مرداد ۱۴۰۰، ۱۶:۱۲
درود
ببینید الان ما یسری ویژگی انیمیشن رو در کلاسهای div گذاشتیم برای همین از همون اول اون المان حالت انیمیشنی داره.
برای اینکه انیمیشن با کلیک شروع بشه، شما باید ویژگیهای انیمیشن رو در بخش CSS در یک کلاس خاص بگذارید و بعد با کد جاوا اسکریپت بگید اگر روی دکمه زد کلاس به المان نسبت داده بشه. برای دیدن دمو هم میتونید پاسخهای <a href="https://stackoverflow.com/questions/4847996/css-animation-onclick" target="_blank" rel="noopener nofollow ugc">این پست</a> رو ببینید.
آرمان جمشیدی۳۰ اردیبهشت ۱۴۰۰، ۰۶:۴۳
سلام
خیلی مقاله عالی و کاربردی ای بود
فقط یه سوال
چطوری loop بدیم به انیمیشن؟
منظورم اینه که فقط یه بار تکرار نشن چندین دفعه تکرار شن بدون اینکه ما تعریف کنیم چند تا
نازنین کریمی مقدم۳۱ اردیبهشت ۱۴۰۰، ۱۴:۲۸
درود
همون طور که در مقاله اشاره کردیم، کافیه ویژگی animation-iteration-count رو تنظیم کنید. این ویژگی تعداد دفعات پخش انیمیشن رو مشخص میکنه. مقدارش رو روی infinite بگذارید، انیمیشن برای همیشه تکرار میشه.
آرش زارعی۱۲ اسفند ۱۳۹۹، ۱۷:۵۹
سلام. میخواستم بدونم چجوری انمیشنی بسازم که با قرار گیری موس بر روی تصویر یک کشو از کنار تصویر باز بشه؟
ممنون میشم جوابم رو بدین...
نازنین کریمی مقدم۱۳ اسفند ۱۳۹۹، ۰۰:۳۳
درود.
به قرارگرفتن موس روی تصویر یا هر المان دیگر هاور (hover) و به کشو هم slide گفته میشه.
بنابراین اگر کدهای بحث <a href="https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp" target="_blank" rel="noopener nofollow ugc">Image Overlay Slide</a> رو در سایت W3schools ببینید، جوابتون رو خواهید گرفت.
hesam۰۳ آبان ۱۳۹۹، ۲۲:۵۸
سلام
عالی بود
لطفا اگه میشه کد css و html ساخت ساعت رو بزارید
نازنین کریمی مقدم۰۴ آبان ۱۳۹۹، ۲۰:۲۹
سلام. شما میتونید از <a href="https://www.w3schools.com/graphics/canvas_clock_start.asp" target="_blank" rel="noopener noreferrer nofollow ugc">این مثال پیاده سازی شده در سایت w3schools</a> برای ساخت ساعت کمک بگیرید.
CHANGIZY۲۹ مهر ۱۳۹۹، ۲۱:۰۰
خیلی خوب بود. احتمالا مطالب کاملتر و توضیحات بیشتری در این رابطه در این سایت باید باشه که من هنوز ندیدم. در هر صورت ممنونم بابت توضیحات خوبتون. فقط یک سوال برای تست بصری کدهای سی اس اس برنامه یاسایت وجود داره که کدهامون رو داخل اون بزنیم تا قبل از بارگذاری در سایت اصلی بتونیم نتیجه رو ببینیم؟ ممنون میشم اگر در این زمینه راهنمایی بفرمایید
نازنین گودرزی۰۱ آبان ۱۳۹۹، ۲۲:۴۹
سلام. ممنون از توجه و همراهی شما.
بله، شما میتونید کدهای خودتون رو توی سایت کدپن که لینکش داخل مقاله وجود داره، وارد کنید و نتیجه رو به صورت آنلاین ببینید. همچنین با ذخیره کردن کدها روی کامپیوتر خودتون هم میتونید نتیجه رو ببینید.
حسین سلیمی۱۳ خرداد ۱۳۹۹، ۱۸:۳۰
عالیییی.من خودم از codepen استفاده میکنم.
نازنین گودرزی۱۴ خرداد ۱۳۹۹، ۰۹:۲۶
ممنون از توجه و همراهی شما با سون لرن.
فرزاد۱۲ خرداد ۱۳۹۹، ۱۷:۵۲
خیلی کاربردی بود واقعا بهش نیاز داشتم
نازنین گودرزی۱۲ خرداد ۱۳۹۹، ۱۷:۵۶
خوشحالیم که برای شما مفید بوده. ممنون از همراهی شما با سون لرن.
رامین ربیعی۰۳ خرداد ۱۳۹۹، ۱۹:۵۹
مثل همیشه کامل و عالی هستید ، تشکر از خدمات اعضای سون لرن