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

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

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

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

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

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

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

ریدایرکت 301

قالب صحیفه

ریدایرکت به https

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

animation

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

خصوصیت animation موجب می گردد تا شما بتوانید هر زیرخصوصیت css ای را به انیمیت در آورید . طول و عرض ، رنگ نوشته یا رنگ پس زمینه را تغییر دهید . هر انیمیشن در CSS نیاز دارد تا توسط یک @keyframes تعریف گردد .

به مثال زیر دقت نمایید.

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  ۰% {
    background-color: #001F3F;
  }
  ۱۰۰% {
    background-color: #FF4136;
  }
}

 

( جهت مشاهده بهتر بر روی ویرایش کلیک کنید )

برای درک بهتر keyframe بهتر است آموزش «ایجاد یک انیمیشن ساده بوسیله CSS » را مطالعه کنید

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

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

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

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

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

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

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

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

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

یک مثال دیگر  :

( جهت مشاهده بهتر بر روی ویرایش کلیک کنید )

شروع و پایان یکسان :

اگر انیمیشن یک شروع و یک پایان یکسان داشته باشد می توانید از کاما استفاده نمایید .

به نمونه زیر دقت داشته باشید :

 

@keyframes pulse {
  ۰%, ۱۰۰% {
    background-color: yellow;
  }
  ۵۰% {
    background-color: red;
  }
}

انیمیشن چندمرحله ای :

در مثال زیر ما می خواهیم علاوه بر اینکه شی ما تغییر رنگ می دهد حرکت نیز کند .

( جهت مشاهده بهتر بر روی ویرایش کلیک کنید )

چه مرورگرهایی از این خصوصیت پشتیبانی می کنند ؟

Chrome Safari Firefox Opera IE Android iOS
۶+ ۵+ ۵+ ۱۲+ ۱۰+ ۴٫۴+ ۴+

 

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

Be the First to Comment!

Notify of
avatar
wpDiscuz