ساخت انیمیشن با css3
CSS3 راه راهی زیادی برای توسعه دهندگان طراحان UI /UX پیش رو گذاشته است . بهترین و جالب ترین اینها transiton ها و انیمیشن ها هستند. فقط چند خط کافیست کاربران خود را هیجان زده کنید !
زمانی که به خوبی از این امکانات استفاده کنید نتیجه بسیار خوب خواهید داشت . چیز های بسیار جدید تری در css3 و html5 وجود دارد .مثل استفاده از شتاب سنج گوشی و تبلت ! استفاده از GPS داخلی گوشی و…
در این مقاله یکسری از متناوب ترین و پر کاربردترین تکنیک هارا خواهید دید که پس از استفاده از این تکنیک ها لبخندی به کاربران خودتون هدیه میدین ! همه این افکت ها فقط با یک transition ساده پیاده سازی شده اند
مبانی انیمیشن در CSS3
من به شما این قول رو میدم اگه این قسمت و قسمت بعد رو متوجه و کامل براتون جا بیوفته همه مثال هایی که زدم رو خودتون دیگه می تونید بسازید
توجه کنید :
ما مثلا قصد داریم وقتی موس روی یک لینک قرار گرفت رنگ اون لینک آبی بشه . خب معمولی میگیم وقتی Hover شد color:blue; انیمیشن هم همینه با یه چیز اضافه که کارو حرفه ای می کنه با این تکنیک میگیم حالا ما قصد دارین همین تغیر رنگ یهو انجام نشه !آروم آروم تغیر رنگ بده که ببینیم رنگ نپره ! حالا می تونیم مشخص کنیم چقدر این تغیر رنگ زمان ببره یا حتی بگیم اولش زود تغیر رنگ بده آخر که رسید یواش تر . می تونیم مشخص کنیم زمانی رو تاخیر داشته باشه که اینو بهتون نشون میدم
مهمترین چیزی که استفاده می کنیم transiton هست این خصیصه چند مقدار میگیره
transition:property duration [delay] [timin-funcion];
property :
چیزی که قصد انیمیش دار شدن اون رو داریم می تونه رنگ باشه تغیر اندازه . مارجین . پدینگ کلا بیشتر چیزایی که برای طراحی استفاده می کنیم . یا می تونید all قرار بدید این مقدار اول اجباری هست و باید مشخص کنید برای چه چیزی دارین زمان مشخص می کنید و برای ما هم مهمترین قسمت
Duration :
زمان اجرای انیمیشن هست . این مقدار با ثانیه هست مثل : ۱s . 2s . 0.5s . 0.3s یا هر زمان دیگر . بنا به استفاده این زمان روکم و زیاد کنید
توصیه :
زمان رو زیاد نکنید و برای هر چیزی از transiton استفاده نکنید یک تغیر رنگ مثلا برای لینک های منو رو ۲ثانیه نزارید این کار کاربر پسند نیست فقط اونقدری بدید که کاربر ببینه ۰٫۲s هم دیده میشه پس سعی نکنید کار بر رو خسته کنید
delay :
این مقدار هم با ثانیه هست . شاید ما قصد این رو دارین رنگ ضمینه یک ثانیه تاخیر داشته باشه ولی رنگ متن بدون تاخیر . این مقدار اختیاری هست و اگه نزارید همون صفر هست بدون تاخیر
timin-funcion :
این مقدار شاید کمی براتون درکش سخت باشه . شاید بگید یعنی چی تغیر رنگ رو تو یک ثانیه انجام بده ولی : اولش سریع بعد آروم . من بهتون این لینک رو پیشنهاد می کنم حتما براتون جا میوفته سایت بسیار بسیار کاربردی cubic-bezier.com این مقدار هم اختیاری هست
حالا که تا حدودی آشنا شدیم بزارید یکی از مهمترین قسمت هارو بگم . ما می تونیم پشت سر هم transiton های زیادی بنویسیم و با کاما جدا کنیم مثل کد زیر . کد زیر رو برای همه مرور گر ها نوشتم . چیز زیاد خاصی نیست همون اولی بنویسید کار جذاب کپی پیست رو انجام بدین با پیشوندهای دست و پا گیرش تمومه
۱ ۲ ۳ ۴ ۵ ۶ | .selector { -moz-transition: color ۱s ease, background-color ۱s ۱s ease-out; -o-transition: color ۱s ease, background-color ۱s ۱s ease-out; -webkit-transition: color ۱s ease, background-color ۱s ۱s ease-out; transition: color ۱s ease, background-color ۱s ۱s ease-out; } |
۱_ fade-in ظاهر شدن
شاید شما هم برای این ساده از جکوئری استفاده می کردید . opacity برای شفافیت ودیدن پشت اون عنصر هست . مقدار این خصیصه از صفر یهنی کاملا محول تا یک نمایش کامل هست
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ | .review.t2 div { opacity: .۵; -moz-transition: opacity ۱s ease, background-color ۱s ۱s ease-out,color ۱s ۲s ease; -o-transition: opacity ۱s ease, background-color ۱s ۱s ease-out,color ۱s ۲s ease; -webkit-transition: opacity ۱s ease, background-color ۱s ۱s ease-out,color ۱s ۲s ease; transition: opacity ۱s ease, background-color ۱s ۱s ease-out,color ۱s ۲s ease; } .review.t2 div:hover { background: #۳۳۴۵d1; color: #۱e1e1e; opacity: ۱; } |
۲_Change color تغیر رنگ
تغیر رنگ در css3 به همراه انیمیشن
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | .review.t3 div { -moz-transition: background-color ۱s ease; -o-transition: background-color ۱s ease; -webkit-transition: background-color ۱s ease; transition: background-color ۱s ease; } .review.t3 div:hover { background: #d133b6; color: #۱e1e1e; opacity: ۱; } |
۳_Grow & Shrink بزرگ شدن
بزرگ کردن عنصری در css3 به همراه انیمیشن
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ | .review.t4 div { -moz-transition: -moz-transform ۱s ease; -o-transition: -o-transform ۱s ease; -webkit-transition: -webkit-transform ۱s ease; transition: transform ۱s ease; } .review.t4 div:hover { -webkit-transform: scale(۱.۳); -ms-transform: scale(۱.۳); -moz-transform: scale(۱.۳); -o-transform: scale(۱.۳); transform: scale(۱.۳); } |
۴_Rotate elements چرخش
چرخندان عناصر در CSS3 موقع هاور به همراه انیمیشن
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ | .review.t5 div { -moz-transition: -moz-transform ۱s ease; -o-transition: -o-transform ۱s ease; -webkit-transition: -webkit-transform ۱s ease; transition: transform ۱s ease; } .review.t5 div:hover { -webkit-transform: rotateZ(-۳۰deg); -ms-transform: rotateZ(-۳۰deg); -moz-transform: rotateZ(-۳۰deg); -o-transform: rotateZ(-۳۰deg); transform: rotateZ(-۳۰deg); } |
۵_Square to circle تبدیل مربع به دایره
تبدیل مربع به دایره با css3
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | .review.t6 div { -moz-transition: -moz-transform ۱s ease, color ۱s ۱s ease, background-color ۱s ۲s; -o-transition: -o-transform ۱s ease, color ۱s ۱s ease, background-color ۱s ۲s; -webkit-transition: -webkit-transform ۱s ease, color ۱s ۱s ease, background-color ۱s ۲s; transition: transform ۱s ease, color ۱s ۱s ease, background-color ۱s ۲s; } .review.t6 div:hover { border-radius: ۵۰%; color: red; background-color: ActiveCaption; } |
۶_۳D shadow سایه سه بعدی
ایجاد سایه سه بعدی
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | .review.t7 div { -moz-transition: -moz-transform ۱s ease; -o-transition: -o-transform ۱s ease; -webkit-transition: -webkit-transform ۱s ease; transition: transform ۱s ease; } .review.t7 div:hover { box-shadow: ۱px ۱px #۵۳a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-۳px); -moz-transform: translateX(-۳px); -ms-transform: translateX(-۳px); -o-transform: translateX(-۳px); transform: translateX(-۳px); } |
۷_ شناور
بحث ایجاد اینیمیش animation نیاز به یک مقاله دیگر دارد .
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ | @@-webkit-keyframes swing { ۱۵% { -webkit-transform: translateX(۵px); transform: translateX(۵px); } ۳۰% { -webkit-transform: translateX(-۵px); transform: translateX(-۵px); } ۵۰% { -webkit-transform: translateX(۳px); transform: translateX(۳px); } ۶۵% { -webkit-transform: translateX(-۳px); transform: translateX(-۳px); } ۸۰% { -webkit-transform: translateX(۲px); transform: translateX(۲px); } ۱۰۰% { -webkit-transform: translateX(۰); transform: translateX(۰); } } @@keyframes swing { ۱۵% { -webkit-transform: translateX(۵px); transform: translateX(۵px); } ۳۰% { -webkit-transform: translateX(-۵px); transform: translateX(-۵px); } ۵۰% { -webkit-transform: translateX(۳px); transform: translateX(۳px); } ۶۵% { -webkit-transform: translateX(-۳px); transform: translateX(-۳px); } ۸۰% { -webkit-transform: translateX(۲px); transform: translateX(۲px); } ۱۰۰% { -webkit-transform: translateX(۰); transform: translateX(۰); } } .review.t8 div { -moz-transition: -moz-transform ۱s ease; -o-transition: -o-transform ۱s ease; -webkit-transition: -webkit-transform ۱s ease; transition: transform ۱s ease; } .review.t8 div:hover { -webkit-animation: swing ۱s ease; -moz-animation: swing ۱s ease; -o-animation: swing ۱s ease; animation: swing ۱s ease; -webkit-animation-iteration-count: ۱; -moz-animation-iteration-count: ۱; -o-animation-iteration-count: ۱; animation-iteration-count: ۱; } |
۹_Inset border بردر درونی
از دورن پر کردن border با انیمیشن
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ | .review.t9 div { -moz-transition: box-shadow ۱s ease; -o-transition: box-shadow ۱s ease; -webkit-transition: box-shadow ۱s ease; transition: box-shadow ۱s ease; } .review.t9 div:hover { box-shadow: inset ۰ ۰ ۰ ۲۵px #۵۳a7ea; } |
