ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 04 مرداد, 1394 4705 0

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

یکی از قابیت های 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

 

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

این مورد را ارزیابی کنید
(2 رای‌ها)
آخرین ویرایش در یکشنبه, 04 مرداد 1394 ساعت 17:41
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا