گروپ دیزاین | ارائه دهنده خدمات نوین

ساخت انیمیشن با css3

 26 نوامبر 2014

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 1s ease, background-color 1s 1s ease-out;
-o-transition: color 1s ease, background-color 1s 1s ease-out;
-webkit-transition: color 1s ease, background-color 1s 1s ease-out;
transition: color 1s ease, background-color 1s 1s ease-out;
}

1_ fade-in ظاهر شدن

شاید شما هم برای این ساده از جکوئری استفاده می کردید . opacity برای شفافیت ودیدن پشت اون عنصر هست . مقدار این خصیصه از صفر یهنی کاملا محول تا یک نمایش کامل هست

ظاهر شدن
.review.t2 div {
opacity: .5;
-moz-transition: opacity 1s ease, background-color 1s 1s ease-out,color 1s 2s ease;
-o-transition: opacity 1s ease, background-color 1s 1s ease-out,color 1s 2s ease;
-webkit-transition: opacity 1s ease, background-color 1s 1s ease-out,color 1s 2s ease;
transition: opacity 1s ease, background-color 1s 1s ease-out,color 1s 2s ease;
}
.review.t2 div:hover {
background: #3345d1;
color: #1e1e1e;
opacity: 1;
}

 

2_Change color تغیر رنگ

تغیر رنگ در css3 به همراه انیمیشن

تغیر رنگ
.review.t3 div {
-moz-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
-webkit-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.review.t3 div:hover {
background: #d133b6;
color: #1e1e1e;
opacity: 1;
}

3_Grow & Shrink بزرگ شدن

بزرگ کردن عنصری در css3 به همراه انیمیشن

بزرگ شدن
.review.t4 div {
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.review.t4 div:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}

4_Rotate elements چرخش

چرخندان عناصر در CSS3 موقع هاور به همراه انیمیشن

چرخش
.review.t5 div {
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.review.t5 div:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-moz-transform: rotateZ(-30deg);
-o-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}

 

5_Square to circle تبدیل مربع به دایره

تبدیل مربع به دایره با css3

مربع به دایره
.review.t6 div {
-moz-transition: -moz-transform 1s ease, color 1s 1s ease, background-color 1s 2s;
-o-transition: -o-transform 1s ease, color 1s 1s ease, background-color 1s 2s;
-webkit-transition: -webkit-transform 1s ease, color 1s 1s ease, background-color 1s 2s;
transition: transform 1s ease, color 1s 1s ease, background-color 1s 2s;
}
.review.t6 div:hover {
border-radius: 50%;
color: red;
background-color: ActiveCaption;
}

 

6_3D shadow سایه سه بعدی

ایجاد سایه سه بعدی

سایه
.review.t7 div {
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.review.t7 div:hover {
box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-ms-transform: translateX(-3px);
-o-transform: translateX(-3px);
transform: translateX(-3px);
}

 

7_ شناور

بحث ایجاد اینیمیش animation نیاز به یک مقاله دیگر دارد .

شناور
@@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.review.t8 div {
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.review.t8 div:hover {
-webkit-animation: swing 1s ease;
-moz-animation: swing 1s ease;
-o-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}

 

9_Inset border بردر درونی

از دورن پر کردن border با انیمیشن

بردر درونی
.review.t9 div {
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-webkit-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}
.review.t9 div:hover {
box-shadow: inset 0 0 0 25px #53a7ea;
}