از دستور keyframes@
برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود.
انیمیشن ها هم مثل transition ها ویژگی های نمایشی عناصر را در طول زمان تغییر می دهند. تفاوت اصلی در این است که ترنزیشن ها به طور خودکار در زمان تغییر یک ویژگی (مثلا در زمان رویداد hover) عمل می کنند اما انیمیشن ها زمانی که به صورت دستی ویژگی animation
اعمال شود, عمل می کنند. به همین دلیل برای به وجود آوردن یک انیمیشن نیاز است که تغییرات ویژگی های یک عنصر را که قرار است متحرک سازی شود در یک keyframes@
تعریف کرده و سپس از آن بوسیله ویژگی animation استفاده کنیم.
تعریف انیمیشن و استفاده از آن
/* تعریف انیمیشن */
@keyframes your-animation-name {
/* استایل های مربوط به انیمیشن */
}
/* اعمال انیمیشن روی عنصر */
.element {
animation-name: your-animation-name;
/* و یا استفاده از روش مختصر نویسی */
animation: your-animation-name 1s ...
}
اول از همه یک نام برای انیمیشن در نظر گرفته و سپس در داخل keyframes@
فریم های کلیدی تعریف می شوند. به این معنی که مقادیری برای ویژگی های عنصری که قرار است متحرک سازی شود را در یک نقطه از دوره زمانی انیمیشن تعریف می کنیم. این به ما اجازه می دهد تا قدم های متفاوت را در بین زمان شروع و پایان انیمیشن کنترل کنیم.
یک نمونه ساده:
@keyframes change-bg-color {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
0% و 100% انتخابگرهای فریم های کلیدی هستند که بیان می کنند مثلا وقتی 100% از زمان انیمیشن طی شد رنگ عنصر کاملا آبی باشد. این ساده ترین نوع انیمشن است که باعث تغییر رنگ پس زمینه یک عنصر از یک مقدار به مقداری دیگر در گذر زمان می شود. و کاملا شبیه به یک transition
عمل می کند. زمانی که می خواهید به اول و آخر یک انیمیشن اشاره کنید می توانید به جای 0% و 100% از کلمات کلیدی from
و to
استفاده کنید.
@keyframes change-bg-color {
from {
background-color: red;
}
to {
background-color: blue;
}
}
فرض کنید می خواهیم عنصری در یک چهارم انیمیشن 100 پیکسل بالا برود و سپس در نصف زمان انیمیشن به مکان قبلش باز گردد و دوباره در سه چهارم انیمیشن 100 پیکسل بالا برود و در آخر انیمیشن دوباره در مکان اولیه خود قرار بگیرد:
@keyframes bouncing {
0% {
top: 0;
}
25% {
top: 100px;
}
50% {
top: 0;
}
75% {
top: 100px;
}
100% {
top: 0;
}
}
همانطور که می بینید برخی از فریم های کلیدی در انیمیشن بالا استایل های تکراری دارند پس می توان آن ها را به صورت زیر نوشت:
@keyframes bouncing {
0%, 50%, 100% { /* from, 50%, to */
top: 0;
}
25%, 75% {
top: 100px;
}
}
فرض کنید می خواهید عنصری را در صفحه جابجا کنید. با ترنزیشن ها فقط می توانستید دو نقطه اول و آخر حرکت را برای عنصر تعریف کنید که مرورگر مسیر خطی را برای حرکت, محاسبه و اجرا می کرد. اما بوسیله انیمیشن ها می توانید مسیر را از حالت خطی خارج کنید و بر روی حرکت و مکان عنصر در نقاط مختلف زمانی انیمیشن کنترل داشته باشید. انیمیشن زیر پریدن در راستای افقی را شبیه سازی می کند:
@keyframes jump {
0% {
left: 0; top: 0;
}
25% {
left: 100px; top: -200px;
}
50% {
left: 200px; top: 0;
}
750% {
left: 300px; top: -200px;
}
100% {
left: 400px; top: 0;
}
}
.element {
position: relative;
left: 0;
top: 0;
animation-name: jump;
animation-duration: 3s;
}
See the Pen keyframes by Mojtaba Seyedi (@seyedi) on CodePen.
در زمان تعریف فریم های کلیدی همچنین می توانید فریم های 0% و 100% را تعریف نکنید اما به این نکته توجه کنید که مرورگر یک فریم کلیدی بر اساس ویژگی ها با مقادیر حساب شده در آن نقاط زمانی می سازد. مثلا اگر 0% را تعریف نکنید مرورگر به ویژگی های اولیه خود عنصر نگاه می کند و از آنها برای نقطه شروع مقادیر انیمیشن استفاده می کند. به مثال زیر توجه کنید:
@keyframes move {
50% {
left: 300px;
}
}
See the Pen keyframes by Mojtaba Seyedi (@seyedi) on CodePen.
همانطور که می بینید نقطه اولیه ای برای شروع وجود ندارد پس مرورگر به ویژگی های اولیه عنصر نگاه می کند که left
برابر صفر است پس آن را نقطه شروع حرکت می داند و در آخر هم نقطه پایانی یعنی 100% تعریف نشده است که باز هم مرورگر ویژگی اولیه عنصر یعنی همان left: 0;
را به عنوان فریم نهایی در نظر می گیرد.
تمام ویژگی ها یک عنصر قابلیت پذیرفتن انیمیشن را ندارند پس اگر چنین ویژگی در یک فریم کلیدی نوشته شود توسط مرورگر نادیده گرفته می شود و آن استایل هیچ تاثیری نخواهد داشت. اما یک استثنا وجود دارد آن هم animation-timing-function می باشد که انیمیشن بر روی مقادیر آن اعمال نمی شود ولی وقتی در یک فریم کلیدی نوشته شود از طرف مرورگر نادیده گرفته نمی شود.
دموی زیر برای بررسی بیشتر آماده شده است:
See the Pen keyframe demo by Mojtaba Seyedi (@seyedi) on CodePen.
توجه داشته باشید زمانی هست که می خواهید یک فریم کلیدی برای تغییر یک ویژگی بوجود بیاورید اما می دانید که ویژگی های دیگر باید ثابت بمانند. برای انجام این عمل باید آن ویژگی که مقدارش قرار نیست تغییر کند هم در فریم کلیدی جدید با همان مقدار قبلی تکرار شود. در مثال بالا دلیل تکرار opacity:1;
همین موضوع است.
احسنت …خسته نباشید.
سلام.خسته نباشید…میشه روی انیمیشن عکس گذاشت ؟؟
با
سلام. ممنون.
منظورتون رو متوجه نمی شم. میشه واضح تر بگین؟
مثلا من با انیمیشن یک دایره ایجاد کردم که وقتی موس روش میاد بزرگ میشه..میخوام یه عکس مثلث وسطش بزارم که با تغییرات دایره همچنان وسط اشکال بمونه…..چنین چیزی امکان داره ؟؟
مثل این؟
http://jsbin.com/cufiha/edi…
سلام .لطفا حین نوشتن کد ها الویت ها رو هم رعایت کنید که چشم بیننده به ترتیب اشتباه قرار گرفتن درست ویژگی و مقدار دهی ها عادت کنه.تشکر
سلام ببخشید میشه بگید چطورمیشه انیمیشن رو در آخر مسیر که رسید نگه داشت؟ یعنی وقتی مثلا مربع تا ته رفت همونجا وایسه وبعد از زمانی که میدیم برگرده سرجاش؟
سلام، باید keyframe ها رو تنظیم کنید، مثلا این مثال رو بیبنید:
https://jsbin.com/cajera/edit?html,css,output
نمیفهمم اون آخر که میرسه چطور میشه بهش گقت که مثلا 2 دقیقه دیگه برگرد به اول؟ممنون اگه جواب بدید
اون آخر که میرسه چطور میشه گقت که مثلا دو دقیقه وایسا سپس برگرد به اول
اینطور کارارو با جاوااسکریپت میشه انجام داد.
سلام واقعا متشکرم بابت سایت عالیتون همه چیز رو جامع و کامل توضیح دادید.
یه سوال داشتم میشه نحوه داینامیک کردن 6 ضلعی رو میتونید توضیح بدید
سلام، اون رو باید یک پست براش نوشت، انگلیسی مطلب زیاد هست در موردش اگر کمکتون میکنه
مشکلی نداره اگر لینک معتبری سراغ دارید معرفی بفرمایید
سلام ممنون از شما خیلی مطلب خوب و کاملی بود کاملا متوجه شدم فقط اگه infinite رو بزار خودش اتوماتیک تکرار میشه درسته؟
با سلام.
میشه webkit-keyfram -@ رو هم توضیح بدید؟
سلام، این مطلب کمکتون میکنه:
https://css-tricks.ir/?p=580
با سلام اگر بخواهیم بعد از لمس شکل دایره شکل به صورت نیم دوارانی به سمت پایین برود در صورت امکان کدش را میدهید.ممنون
با سلام اگر بخواهیم بعد از لمس شکل دایره شکل به صورت نیم دوارانی به سمت پایین برود در صورت امکان کدش را میدهید.ممنون
سلام
با تعدادی دایره کوچیک یه دایره بزرگ ساختم اگ بخوام انیمیشن بدم بهش تا از یه سمت دونه دونه رنگش عوض بشه باید چه کدی بزنم
سلام. این بخش رو متوجه نشدم. منظور چیه؟
تمام ویژگی ها یک عنصر قابلیت پذیرفتن انیمیشن را ندارند پس اگر چنین ویژگی در یک فریم کلیدی نوشته شود توسط مرورگر نادیده گرفته می شود و آن استایل هیچ تاثیری نخواهد داشت. اما یک استثنا وجود دارد آن هم animation-timing-function می باشد که انیمیشن بر روی مقادیر آن اعمال نمی شود ولی وقتی در یک فریم کلیدی نوشته شود از طرف مرورگر نادیده گرفته نمی شود.
ذهنمو درگیرکرده.
سلام،
فرض کنید توی یک keyframes از ویژگی مثل text-decoration استفاده کنیم، خب این ویژگی قابل متحرک سازی نیست در نتیجه مرورگر اون رو در نظر نمیگیره و انگار که شما اصلا ننوشتی همچین خط کدی رو.
حالا در بین همه ویژگی هایی که متحرک سازی نمیشن یک ویژگی استثنا هستش (animation-timing-function) که خودش قابل متحرک سازی نیست اما اگر در keyframe نوشته بشه نادیده گرفته نمیشه و مقدارش باعث میشه تا شتاب انیمیشن در اون فریم تغییر کنه.
امیدوارم به ذهن درگیرتون کمک کرده باشم :)
موفق باشید.
بله الان متوجه.
خیلی ممنونم.
سایت عالی، کامل و جامع.
سلام و عرض ادب
آقا ما یک اسلاید شو داریم 5 تا کی فریم داره و 5 تا عکس بیشتر نمیتونیم بذاریم میخاستیم 10 کی فریمش کنیم ولی از این درصداش سر در نیاوردم
میشه لطفا کمک کنید
اینم کد هاش : http://s6.picofile.com/file/8390632918/slider.txt.html
سلام این انیمیشن یک بار بیشتر تکرار نمیشه ولی من میخام پشت سر هم تکرار شه چی کار باید بکنم
این خط رو به کد اضافه کنید
animation-iteration-count: infinite;
سلام من نوشته ای دارم که یک گردش مداوم دارد ولی موقع گردش درفایرفاکس نوشته برعکس نمایش داده شده. میشه راهنمایی کنید چطور تغییر بدم
سلام خسته نباشید دمتون گرم.
ببخشید چطور میشه متن رو عوض کرد؟
مثلا من یک divدارم که توش یه متنیه و میخوام هی عوض بشه و متنایی که میخوام بیاد به جاش.
چطور باید این کار رو انجام بدم؟
ممنون میشم جواب بدید…