ایجاد یک شیئ متحرک در CSS3 Animations

ویژه ایجاد یک شیئ متحرک در CSS3 Animations

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

یکی از قابیت های Css3 که با ادغام HTML 5  می توان از آن استفاده کرد انیمیشن می باشد .تا به حال با نرم افزار فتوشاپ و فلش بنر طراحی کرده اید ؟ برای حرکت دادن اجزا همیشه باید یک فریم ایجاد کنیم . در Css3  نیز قبل از ساخت انیمیشن باید با Keyframe آشنا شوید . Keyframe چیست ؟ بوسیله Keyframe مشخص می کنیم که در چه زمانی باید چه تغییراتی درون Css انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .

اینترنت اکسپلورر 10 , موزیلا یا همان فایرفاکس ، سافاری ، کروم و اوپرا از این ویژگی پشتیبانی می کنند. (دمو تمرین در مرورگر )
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .

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

برای ایجاد این حرکت باید ابتدا یک استایل ایجاد کنیم . در کدهای ابتدایی عرض و ارتفاع را مشخص کنید . سپس محل قرار گیری در کادر .
سپس با استفاده از دستور animation-duration زمان اجرای انیمیشن به ثانیه یا میلی ثانیه مشخص می شود .
سپس با استفاده از خصوصیت animation-iteration-count مشخص می کنیم تعداد اجرای انیمیشن چقدر باشد .
با استفاده از خصوصیت animation-direction می توانید جهت و نحوه تناوب انیمیشن را تعیین نمایید.  توجه: اگر خصوصیت animation-iteration-count را با مقدار 1 تنظیم کرده باشید (انیمیشن فقط یکبار اجرا می شود) در این صورت اگر خصوصیت animation-direction را با مقدار "alternate" یا "alternate-reverse" تنظیم نمایید، اثری نخواهد داشت.

 1. ابتدا کدهای تشکیل دهنده یک صفحه HTML را در یک فایل نوت پد یا هر ویرایشگر دیگر با پسوند html. ذخیره میکنم . مثلا index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

 

 سپس یک استایل ایجاد میکنم و در تگ div خصوصیت هایی که در بالا توضیح داده ام را در آن تایپ میکنم . 

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}

 

کد HTML تا به این مرحله باید به این شکل تایپ شده باشد .

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}
</style>
</head>
<body>

 

حالا کدهای مربوط به حرکت کادر مربع شکل .  همانطور که مشاهده می کنید در 0 صدر رنگ مربع قرمز و حرکتی ندارد .
در 25 درصد حرکت رنگ کادر زرد و 200پیکسل به طرف چپ حرکت می کند .
در 50 درصد رنگ کادر آبی و 200 پیکسل از سمت بالا فاصله می گیرد . 
در 75 درصد 200 پیکسل از بالا فاصله و رنگ کادر سبز می شود . 
100 در درصد رنگ کادر قرمز و به سمت جای اصلی مربع حرکت می کند . 

کد کلی به این شکل می باشد و کد را ذخیره و در مرورگر اجرا کنید . 

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}
/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>

 

ایجاد یک شیئ متحرک در CSS3 Animations

 

دمو تمرین در مرورگر

آخرین بروز رسانییکشنبه, 04 مرداد 1394 17:41

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #3 دانلود آهنگ جدید 1394-06-16 14:01
علی بود .ولی من می خوام فقط پایین بیاد و بعد بازم بره بالا . وقتی پیکسلارو تغییر میدم از کار میوفته ؟؟ ممنون از سایتتوم
نقل قول کردن
0 #2 رضا 1394-05-11 17: