نمونه کد اتصال به دیتابیس

محاسبه طول پسورد

کدنویسی وردپرس

نمونه فرم کامل تماس

محاسبه قیمت به زبان php

صفحه سفید در وردپرس

غیرفعال کردن افزونه

ریدایرکت 301

قالب صحیفه

ریدایرکت به https

تابع چک کردن زوج یا فرد

ایجاد یک انیمیشن ساده بوسیله CSS3

۵ مهر ۱۳۹۴ | 0 نظر | لینک کوتاه | css, آموزش

انیمیشن با CSS این قابلیت را به ما می دهد تا بدون جاوا اسکریپت یک انیمیشن با قابلیت ست کردن keyframes درست کنیم .

keyframe انیمیشن ها در حال حاضر در مرورگرهای webkit ( نظیر کروم) ، فایرفاکس ، و IE10 ساپورت می شوند و در سایر مرورگر های قدیمی انیمیشن شما نمایش داده نمی شود .

۸ خصوصیت برای تعریف انیمیشن در CSS وجود دارد

۱- animation-delay :  تعریف می کند چه موقع انیمیشن استارت شود.

۲- animation-direction : تعیین می کند که انیمیشن به صورت طبیعی یا معکوس اجرا شود .

۳- animation-duration : طول مدت کامل یک سیکل کامل انیمیشن را تعریف می کند.

۴- animation-interation-count : تعداد دفعاتی که باید سیکل انیمیشن پیش از توقف تکرار شود .

۵- animation-name : یک نام برای انیمیشن با قاعده keyframes تعیین می کند.

۶- animation-play-state : تعیین می  کند چه موقع انیمیشن استاپ یا استارت شود .

۷- animation-timing-function : تعیین می کند چگونه یک انیمیشن پس از سیکلش رفتار کند.

۸- animation-fill-mode : تعیین می کند چگونه یک css انیمیشن باید استایل خود را پیش و پس از اجرا بپذیرد

در زیر یک نمونه کد را با هم می بینیم

 

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0.5s;
   animation-iteration-count: 2;
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

/* codeplan.ir. */

@keyframes move {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from {
      -moz-transform: translateX(0);
   }
   to {
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from {
      -webkit-transform: translateX(0);
   }
   to {
      -webkit-transform: translateX(100px);
   }
}

البته به اختصار به صورت زیر نیز می توانیم بیاوریم :

 

div {
   animation: move 1s ease-in-out 0.5s 2 alternate;
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframe :
هر کی فریم تعیین می کند که المان های انیمیشن چگونه برای رسیدن به نقطه هدف در یک سکانس رندر شوند . در صورتیکه مقدار زمان کی فریم ۰% باشد بیانگر زمان آغاز و اگر ۱۰۰% باشد بیانگر زمان خاتمه هست .
به مثال زیر توجه داشته باشید.

@keyframes move {
   ۰% { transform: translateX(0); }
   ۱۰۰% { transform: translateX(100px); }
}

/* codeplan.ir */

@keyframes move {
   ۰% { transform: translateX(0); }
   ۵۰% { transform: translateX(20px); }
   ۱۰۰% { transform: translateX(100px); }
}

دیدگاه بگذارید

Be the First to Comment!

Notify of
avatar
wpDiscuz