با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش. چگونگی کار با ویژگی انیمیشن (animations) در css بپردازیم. قابلیت انیمیشن در css به شما اجازه می دهد که با استفاده از ویژگی animations ، برای اکثر عناصر html قابلیت انیمیشن ایجاد کنید. بدون اینکه از جاوا اسکریپت و یا فلش استفاده کنید! با استفاده از این ویژگی می توانید قالب وب سایت خود را پویا و جذاب تر کنید. و کاربران از حضور طولانی در وب سایت شما لذت می برند.
در پست های قبل در حوزه ی آموزش css ، ما به آموزش موضوعات توابع حرکات عناصر سه بعدی در css ، توابع انتقال و جابه جایی عناصر دو بعدی در css ، توابع انتقال و جابه جایی عناصر سه بعدی در css و در بحث جلوه های ویژه نیز به آموزش کار با افکت های سایه در css و کار با ویژگی Transitions در css پرداختیم.
در ادامه بحث جلوه های ویژه در css در این پست به آموزش چگونگی کار با ویژگی انیمیشن در css پرداخته ایم.
ویژگی animations اجازه می دهد که یک عنصر در یک بازه ی زمانی از یک style به style دیگری تغییر کند. با استفاده از این ویژگی می توانید خصوصیات بسیاری از یک عنصر html را در یک بازه ی زمانی تغییر دهید.
برای استفاده از ویژگی انیمیشن در css ، شما ابتدا باید یک keyframes برای این ویژگی تعریف کنید. ویژگی keyframes خصوصیاتی که روی عنصر html در زمان اجرای animations ، تغییر می کند را نگه می دارد.
در جدول زیر اعداد مربوط به هر مرورگر اولین نسخه ی آن مرورگر که از قابلیت animation پشتیبانی می کند را نشان می دهد.
پیشوندهای -webkit-, -moz- یا -o- به این معنی است که در آن نسخه از مرورگر مربوطه باید از این پیشوندها در تعریف انیمیشن استفاده کنید.
مثال: در این مثال ابتدا خصوصیاتی که از عنصر html قرار است تغییر کند در داخل یک keyframes به نام ” example ” تعریف می شود. سپس ویژگی animations باید هم نام keyframes که تعریف کرده ایم یعنی ” example ” نام گذاری شود تا ارتباط بین این دو ویژگی برقرار شود. و در نهایت مدت زمان اثر گذاری انیمیشن مشخص شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* 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 (که مدت زمان اجرای انیمیشن را مشخص می کند) را مشخص نکنید. بصورت پیش فرض “۰” در نظر گرفته می شود . و هیچ نتیجه ای در اجرا مشاهده نخواهید کرد.
شما می توانید مدت زمان اجرای انیمیشن را به قسمت های مختلف تقسیم کرده و برای هر قسمتی اعمال خاصی مشخص کنید.
مثال: در این مثال زمانی که انیمیشن ۲۵ درصد کامل شده سپس زمانی که ۵۰ درصد کامل می شود و به همین صورت تا ۱۰۰ درصد. برای هر کدام از این قسمت ها رنگ پس زمینه عنصر html تغییر می کند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* 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; } |
مثال ۲: می توانید در هر کدام از قسمت ها چندین عمل را تعریف کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* 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 برای مشخص کردن تاخیر اجرای انیمیشن استفاده می شود.
مثال زیر تا قبل از شروع انیمیشن تاخیر ۲ ثانیه دارد:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: 2s; } |
در مثال زیر animation-delay مقدار منفی (-۲) دارد، به این ترتیب از مدت زمان اجرا کم می شود، و انیمیشن ۲ ثانیه اجرا خواهد شد:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: -2s; } |
با استفاده از ویژگی animation-iteration-count می توانید تعداد دفعات تکرار شدن انیمیشن را تعیین کنید
مثال:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; } |
مثال ۲: در این مثال با تخصیص مقدار “infinite” به ویژگی animation-iteration-count ، انیمیشن دائم اجرا خواهد شد:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; } |
با استفاده از ویژگی animation-direction می تواندی تعیین کنید که انیمیشن در جهت معکوس یا در چرخه های متناوب اجرا شود. مقادیر ویژگی animation-direction به شرح زیر است:
مثال ۱:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-direction: reverse; } |
مثال ۲:
1 2 3 4 5 6 7 8 9 10 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; } |
مثال ۳:
1 2 3 4 5 6 7 8 9 10 | div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate-reverse; } |
خصوصیت animation-timing-function منحنی سرعت انیمیشن را مشخص می کند.
خصوصیت animation-timing-function شامل ۶ مقدار زیر است:
ease
: یک انیمیشن با شروع آهسته، پس از آن سریع، و سپس به آرامی پایان می یابد. (این به طور پیش فرض)linear
: یک انیمیشن با همان سرعت را از ابتدا تا انتها مشخص می کند.ease-in
: تعیین یک انیمیشن با شروع آهسته.ease-out
: مشخص کردن انیمیشن با پایان آهسته.ease-in-out
: تعیین یک انیمیشن با شروع و پایان آهسته.(cubic-bezier(n,n,n,n
:شما می توانید مقادیر خود را در یک عملکرد cubic-bezier تعریف کنید.مثال زیر شامل تست تمام حالت های فوق می باشد :
1 2 3 4 5 | #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;} |
انیمیشن CSS بر یک عنصر قبل از اولین فریم keyframe یا بعد از آخرین فریم keyframe تأثیر نمی گذارد.
خصوصیات anim-fill-mode می تواند این رفتار را برطرف کند.
خصوصیت anim-fill-mode یک style را برای عنصر target مشخص می کند وقتی که انیمیشن پخش نمی شود (قبل از شروع آن، پس از پایان دادن به آن، یا هر دو).
خصوصیت animation-fill-mode شامل مقادیر زیر است :
none
: مقدار پیش فرض. انیمیشن قبل و بعد از اجرا هیچ style خاصی برای آن اعمال نمی شود.forwards
: این عنصر مقادیر style را که توسط آخرین فرمان کلید تعیین می شود،مشخص می کند (به جهت حرکت و انیمیشن-تکرار شمارش بستگی دارد.)backwards
: این عنصر مقادیر style را که توسط اولین فریم کلید تعیین شده (بستگی به جهت حرکت انیمیشن) تعیین می کند، دریافت می کند و در طول مدت زمان تاخیر انیمیشن حفظ می شودboth
: انیمیشن از هر دو حالت forwards و backwards پیروی می کند، ویژگی های انیمیشن را در هر دو جهت گسترش می دهد.مثال زیر اجازه می دهد که عنصر <div> مقادیر style را از آخرین کادر کلید هنگامی که انیمیشن به پایان می رسد را حفظ کند:
1 2 3 4 5 6 7 8 9 | div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-fill-mode: forwards; } |
حالت backwards :
1 2 3 4 5 6 7 8 9 10 | div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards; } |
حالت both :
1 2 3 4 5 6 7 8 9 10 | div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: both; } |
مثال زیر یک حالت استفاده از ۶ خصوصیت انیمیشن را نشان می دهد:
1 2 3 4 5 6 7 8 | div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } |
شما می توانید با استفاده از ویژگی animation تمام خصوصیات فوق را در یک خط کد کوتاه مانند زیر تعریف کنید:
1 2 3 | div { animation: example 5s linear 2s infinite alternate; } |
خصوصیت | توضیحات |
---|---|
@keyframes | کد animation را مشخص می کند. |
animation | امکان تعریف تمام خصوصیات زیر را در یک انتساب کوتاه می دهد. |
animation-delay | مدت تاخیر در شروع اجرای انیمیشن را مشخص می کند. |
animation-direction | مشخص می کند که آیا انیمیشن باید به جلو، عقب، یا در چرخه های متناوب اجرا شود. |
animation-duration | مدت زمان اجرای انیمیشن را مشخص می کند. |
animation-fill-mode | یک Style را برای عنصر مشخص می کند هنگامی که انیمیشن اجرا نمی شود (قبل از شروع آن، پس از پایان دادن به آن، یا هر دو) |
animation-iteration-count | تعداد دفعات اجرای انیمیشن را مشخص می کند. |
animation-name | نام انیمیشن را برای شناسایی در زمان استفاده از @keyframes مشخص می کند. |
animation-play-state | تعیین اینکه آیا انیمیشن در حال اجرا است یا متوقف شده است. |
animation-timing-function | منحنی سرعت انیمیشن را مشخص می کند. |
یکی از قابلیت ها و جلوه های ویژه ای که کاربرد زیادی در اغلب وب سایت ها دارد، جلوه های ویژه ی انیمیشن در عناصر html است، کافیست که با طرز کار با ویژگی انیمیشن در css آشنایی داشته باشید تا قالب وب سایتی پویا و جذاب خلق کنید.
parsa
سلام، بسیار متشکرم. گشتم و آخر اینجا پیداش کردم. ۱۷ سال برنامه نویس بودم/۱۷ سال معلم بودم. از کامپیوتر های نسل ۸۰٫۸۶ تا الان کار کردم. از اچ تی ام ال خاطره خوبی دارم. وب دیزاین رو با html, css, java script. php , mysqlبیشتر دوست دارم . متخصص برنامه نویسی در نت بوسیله سی پلاس پلاس هستم. این ها رو گفتم که بدونید برای این سایت زحمت کشیدید. موفق، سلامت و شاد باشید.
پی وی لرن
سلام
ممنون، نظر لطف شماست و خوشحالیم که مورد رضایت شما واقع شده است.
ارسلان
سلام کدی در http://codepen.io/yoannhel/pen/sJpDj
وجود دارد وقتی در ویرایشگرقرار میدم کار نمیکنه
پی وی لرن
سلام
شما احتمالا بخش css را که در وست کادر وجود دارد را مستقیم داخل فایل css خودتان قرار می دهید ولی باید از گزینه های بالای کادر css وست صفحه گزینه view compiled css قرار دهید چون بصورت پیش فرض scss هستش.
جواد
با سلام و خسته نباشید
اگ بخایم انیمیشنمون در همون حالت بمونه و بعد از تموم شدن تایم ب حالت اولیه برنگرده باید چیکار کنیم؟
پوریا
سلام.
بستگی به این داره که مقدار ۱۰۰% رو چه طور تنظیم کرده باشین.
مثلا توی مثال های بالا و اکثر مثال های توی وب, اگه به کد ها دقت کنین, مقدار ۱۰۰% همون مقدار اولیه یعنی ۰% تعیین میشه یا اصلا تعیین نمیشه که در این صورت بازم مرورگر خودش اونو برابر با مقدار ۰% در نظر میگیره. که برای تکرار کردن یه انیمیشن ویژگی کارآمدیه.
اما اگه شما مقدار متفاوتی رو براش در نظر بگیرین, دیگه به نقطه اولیه بر نمیگرده.
محمد
سلام خسته نباشید واقعا عالی و مفید بود
یه سوال داشتم:آیا میتوان با css دو انیمیشن مختلف برای یه موردی مثلا نوار لودینگ تعریف کرد و پشت سر هم و نه همزمان اجرا شوند؟ مثلا انیمیشن اول برای رفت و برگشت خط رنگی(از چپ به راست مثلا) و انیمیشن دوم برای پر کردن نوار؟
پی وی لرن
با سلام
از keyframes ها می توانید استفاده کنید، لینک زیر را مشاهده کنید
keyframes