اعمال افکت های حرکتی توسط دستورات CSS

در نسخه سوم CSS موسوم به CSS3 دستورات متنوعی جهت ایجاد افکت های حرکتی به عناصر و ایجاد انیمیشن اضافه گردیده است که استفاده صحیح از آنها موجب ارتقاع جلوه بصری صفحات وب شده و زیبایی آن را دو چندان می کند. مهمترین مزیت افکت های CSS نسبت به افکت هایی که توسط جاوا اسکریپت یا جی کوئری اعمال می شوند، حجم کمتر فایل های CSS می باشد که همین امر موجب بارگذاری سریعتر صفحه می شود.

Transform

با استفاده از خاصیت transform می توان جلوه های زیبایی مانند چرخاندن، مورب کردن، تغییر بزرگ نمایی و ... را به عناصر موجود در صفحات وب اعمال نمود.

خاصیت transform را می توان با دستورات زیر مقدار دهی نمود:

  • translate: جا به جا کردن.
  • scale: تغییر بزرگنمایی.
  • rotate: چرخاندن.

Translate

از این دستور برای تغییر موقعیت اولیه عنصر استفاده می شود. این دستور دو پارامتر دریافت می کند که پارامتر اول برای فاصله از سمت چپ و پارامتر دوم برای فاصله از بالا تعیین می گردد.

برای مثال فرض کنید کادری در موقعیت 0, 0 قرار دارد اما هنگام اجرا قصد داریم آن را به موقعیت 200, 200 انتقال دهیم.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box{
        width: 100px;
        height: 100px;
        background-color: cadetblue;
        transform: translate(200px,200px);

      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

نکته: مقادیر تعیین شده برای transform نسبت به موقعیت فعلی، عنصر را جا به جا می کنند. برای مثال اگر عنصر مورد نظر در موقعیت 100, 100 باشد و برای خاصیت transform آن مقادیر 200, 200 را تعیین کنیم، عنصر مورد نظر به این مقدار جا به جا شده و در موقعیت 300, 300 قرار می گیرد.

Scale

از این دستور برای تغییر بزرگنمایی عناصر استفاده می شود که هم با یک مقدار و هم با دو مقدار می توان از آن استفاده نمود. اگر برای آن یک مقدار تعیین شود، مقدار تعیین شده هم برای عرض و هم برای ارتفاع در نظر گرفته می شود و درصوتی که دو مقدار برای آن مشخص شود، مقدار اول برای عرض و مقدار دوم برای ارتفاع خواهد بود. مقادیر تعیین شده برای scale بصورت نسبی در نظر گرفته می شوند. برای مثال اگر مقدار 2 برای آن تعیین گردد، بدین معنی است که عرض و ارتفاع آن دو برابر شوند.

مثال: کادری با عرض و ارتفاع 200 پیکسل طراحی کنید بطوریکه با انتقال ماوس بر روی آن، اندازه کادر 1.5 برابر شود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box{
        width: 100px;
        height: 100px;
        background-color: tomato;
        position: relative;
        top: 200px;
        left: 200px;
      }
      #box:hover{
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

پس از ذخیره سازی  اجرای برنامه مشاهده می کنید که با انتقال ماوس بر روی کادر مورد نظر، اندازه آن بزرگتر می شود.

Rotate

از این دستور برای چرخاندن عناصر استفاده می شود، افکت چرخشی می تواند دو بعدی یا سه بعدی باشد. پارامتر ورودی این دستور عددی با واحد درجه بوده و نحوه استفاده از آن به شکل زیر می باشد.

transform: rotate(45deg);

مثال: کادری در صفحه ایجاد نمایید که با انتقال ماوس بر روی آن، 45 درجه بچرخد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box{
        width: 100px;
        height: 100px;
        background-color: mediumseagreen;
        position: relative;
        top: 100px;
        left: 100px;
      }
      #box:hover{
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

Transition

در مثال های قبل مشاهده نمودید که افکت های حرکتی مانند rotate, translate و ... بصورت آنی اعمال می گردیدند. با استفاده از transition می توان تنظیم نمود تغییر خواص یک عنصر، در یک بازه زمانی مثلا 1 ثانیه اتفاق بیفتد. نحوه استفاده از این خاصیت به شکل زیر می باشد.

transition: all 1s;

دستور فوق به این معنی می باشد که کلیه تغییرات عنصر مورد نظر اعم از عرض، ارتفاع، رنگ و ... در بازه زمانی یک ثانیه اتفاق بیفتد.

مثال: کادری طراحی کنید که با انتقال ماوس بر روی آن، 90 درجه چرخیده و رنگ آن از قرمز به آبی تغییر یابد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        top: 100px;
        left: 100px;
        transition: all 1s;
      }
      #box:hover{
        transform: rotate(180deg);
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

با ذخیره سازی و اجرای صفحه مشاهده خواهید نمود که تغییرات مورد نظر با در بازه زمانی تعیین شده، اعمال می شوند که همین امر موجب زیباتر شدن آنها می گردد.

نکته: خاصیت transition یک خاصیت event base (وابسته به رویداد) می باشد و کاربرد آن زمانی می باشد که قصد داریم با اتفاق افتادن رویدادی مانند hover اجرا شود.

Animation

یکی از زیباترین و پرکاربردترین دستوراتی که در CSS3 اضافه گردید animation می باشد که بوسیله آن می توان افکت های بسیار زیبا در صفحات وب ایجاد نمود. از animation برای تغییر خواص یک عنصر در بازی زمانی دلخواه استفاده می شود. مهمترین تفاوت animation و transition در آن است که اجرای transition وابسته به رویدادی مانند hover بوده اما اجرا animation بصورت اتوماتیک اتفاق می افتد.

تعریف انیمیشن

برای تعریف انیمیشن از دستور @keyframes و به شکل زیر استفاده می شود.

@keyframes animationName {
  from{

  }
  to{

  }        
}

پس از عبارت @keyframes نام انیمیشن تعیین می گردد که بدنه آن شامل دو قسمت from و to می باشد. در بخش from تنظیمات اولیه و در بخش to تنظیمات نهایی ذکر می گردند. برای مثال اگر قصد داشته باشید رنگ عنصری از قرمز به آبی تبدیل شود، در بخش from می بایست رنگ قرمز و در بخش to رنگ آبی را مشخص نمایید.

نحوه استفاده از انیمیشن

پس از تعریف انیمیشن می توان آن را به عنصر مورد نظر اختصاص داد. انیمیشن به دلیل تنوع کاربرد دارای تنظیمات مختلفی می باشد که مهمترین آنها عبارتند از:

  • animation-name: نام انیمیشنی که عنصر مورد نظر از آن استفاده می نماید.
  • animation-duration: مدت زمان اجرای انیمیشن.
  • animation-iteration-count: تعداد دفعات تکرار.
  • animation-timing-function: سرعت اجرای انیمیشن.
  • animation-direction: جهت اجرای انیمیشن.

برای مثال قصد داریم یک div دایره ای شکل را از نقطه 0 به نقطه 500 منتقل کنیم به طوریکه در این مسیر رنگ آن نیز تغییر یابد.

ابتدا باید تنظیمات اولیه div را اعمال نماییم.

#box{
  width: 100px;
  height: 100px;
  background-color: darkslateblue;
  position: absolute;
  top: 100px;
  left: 0px;
  border-radius: 50%;
}

در ادامه می بایست یک انیمیشن تعریف کنیم.

@keyframes move {
  from{
    left: 0px;
    background-color: darkslateblue;
  }
  to{
    left: 500px;
    background-color: deeppink;
  }        
}

در این مثال مشخص شده است عنصری که از این انیمیشن استفاده می نماید می بایست از نقطه 0 به نقطه 500 منتقل شده و رنگ آن نیز از darkslateblue به deeppink تغییر پیدا کند. پس از تعریف انیمیشن می توان آن را به عنصر مورد نظر اختصاص داد بنابراین دستورات زیر را به تنظیمات div اضافه می کنیم.

#box{
  width: 100px;
  height: 100px;
  background-color: darkslateblue;
  position: absolute;
  top: 100px;
  left: 0px;
  border-radius: 50%;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

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

animation-iteration-count

این خاصیت برای تعیین تعداد دفعات تکرار مورد استفاده قرار می گیرد که در مثال فوق مقدار آن 1 تعیین شده است. در صورتیکه قصد داشته باشید انیمیشن مورد نظر به تعداد دفعات نامحدود تکرار شود می توانید مقدار آن را infinite قرار دهید.

animation-iteration-count: infinite;

animation-timing-function

این خاصیت برای تعیین افکت سرعتی اجرای انیمیشن مورد استفاده قرار می گیرد که می تواند حالت های زیر باشد:

  • ease-in: شروع انیمیشن به آرامی و پایان آن سریع خواهد بود (تند شونده).
  • ease-out: شروع انیمیشن با سرعت زیاد و پایان آن کند خواهد بود (کند شونده).
  • ease-in-out: شروع و پایان انیمیشن به آرامی و در بازه میان آن دو دارای شتاب خواهد بود. به عبارتی دیگر، انیمیشن با سرعت پایین شروع شده، شتاب میگیرد و در پایان دوباره با سرعت پایین خاتمه می یاد.
  • liner: سرعت یکنواخت بدون حالت تند شونده یا کند شونده.

تنظیمات مثال قبل را به شکل زیر تغییر دهید.

animation-timing-function: linear;

animation-direction

این خاصیت جهت اجرای انیمیشن را تعیین می نماید که می توان مقادیر زیر را به آن اختصاص داد:

  • normal: حالت عادی (انتقال از نقطه 0 به 500)
  • reverse: معکوس (انتقال از نقطه 500 به 0)
  • alternate: افکت رفت و برگشتی.

در حالت عادی حتی اگر تعداد دفعات تکرار infinite تعیین شود،  div مورد نظر پس از رسیدن به نقطه 500 بطور ناگهانی به نقطه 0 منتقل شده و اجرای انیمیشن مجددا تکرار می شود. اگر قصد داشته باشید پس از رسیدن به نقطه 500، دوباره به آرامی به نقطه 0 منتقل شود می توانید خاصیت animation-direction را برابر این مقدار قرار دهید.

animation-direction: alternate;

بنابراین دستورات کامل این مثال به شکل زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: darkslateblue;
        position: absolute;
        top: 100px;
        left: 0px;
        border-radius: 50%;
        animation-name: move;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: alternate;
      }
      @keyframes move {
        from {
          left: 0px;
          background-color: darkslateblue;
        }
        to {
          left: 500px;
          background-color: deeppink;
        }
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

مثال: یک div ایجاد نمایید که در راستای اضلاع یک مثلث حرکت نماید.

تحلیل: برای حل تمرین نیاز است که div مورد نظر از نقطه A به نقطه B و از نقطه B به نقطه C منتقل شده و در نهایت مجددا به نقطه A باز گردد. در چنین شرایطی که نیاز به تقسیم زمان به بازه های بیش از دو حالت می باشد می توان به جای استفاده از from, to از حالت درصدی برای تعیین کسر زمانی استفاده نمود.

@keyframes move {
  0%{
    موقعیت در نقطه A
  }
  33%{
    موقعیت در نقطه B
  }
  66%{
    موقعیت در نقطه C
  }
  100%{
    بازگشت به نقطه A
  }
}

در کدهای فوق با استفاده از علامت % بازه زمانی اجرای انیمیشن به 4 بخش تقسیم شده است و از آنها که نقطه شروع و پایان یکسان می باشد می توان گفت به سه بخش اصلی تقسیم گردیده که در یک از آنها موقعیت عنصر در نقاط A,B,C می بایست مشخص گردد. کدهای این مثال به شکل زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: darkslateblue;
        position: absolute;
        top: 100px;
        left: 400px;
        border-radius: 50%;
        animation-name: move;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      @keyframes move {
        0%{
          top: 100px;
          left: 400px;
        }
        33%{
          top: 400px;
          left: 700px;
        }
        66%{
          top: 400px;
          left: 100px;
        }
        100%{
          top: 100px;
          left: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

پس از ذخیره سازی و اجرای صفحه مشاهده خواهید نمود که div مورد نظر در راستای اضلاع یک مثلث حرکت می کند.