آموزش Animation در CSS3

متحرک‌سازی در CSS3

CSS3 امکان ایجاد انیمیشن‌های زیبا و کاربرپسند را بدون نیاز به JavaScript یا Flash فراهم می‌کند. با استفاده از این قابلیت، می‌توانید المان‌های HTML را به‌صورت تدریجی از یک حالت به حالت دیگر تغییر دهید و تجربه‌های تعاملی جذاب‌تری خلق کنید

نحوه استفاده از Animation در CSS3

برای ایجاد انیمیشن، باید Keyframes تعریف شوند. این Keyframes تعیین می‌کنند که در هر مرحله از انیمیشن، المان در چه وضعیتی قرار داشته باشد.در این مثال، رنگ پس‌زمینه از قرمز به زرد تغییر می‌کند و این تغییر در طول 4 ثانیه انجام می‌شود.

            
            @keyframes example {
                from {background-color: red;}
                to {background-color: yellow;}
              }
              
              div {
                width: 100px;
                height: 100px;
                animation-name: example;
                animation-duration: 4s;
              }
        

خاصیت‌های Animation در CSS3

تعریف Keyframes

با استفاده از @keyframes، می‌توانید مراحل مختلف انیمیشن را مشخص کنید:

    @keyframes slide {
        0% {left: 0px;}
        50% {left: 100px;}
        100% {left: 0px;}
      }      

تکرار انیمیشن و جهت آن

می‌توانید با استفاده از animation-iteration-count تعداد دفعات اجرای انیمیشن را مشخص کنید:

    div {
        animation-iteration-count: infinite;
      }      

همچنین با animation-direction جهت اجرای انیمیشن را تنظیم کنید:

• normal: به‌صورت عادی.
• reverse: در جهت معکوس.

مختصرنویسی Animation

تمامی خاصیت‌های انیمیشن را می‌توان به‌صورت یکجا در قالب یک خط تعریف کرد.در این مثال، انیمیشن slide با مدت‌زمان 2 ثانیه، تأخیر 1 ثانیه، به‌صورت نامحدود و در هر دو جهت اجرا می‌شود.

    div {
        animation: slide 2s linear 1s infinite alternate;
      }