انیمیشن در Css3

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

anim03

یکی دیگر از کاربردی ترین و اصلی ترین قابلیت هایی که به Css3 اضافه شده ، ساخت انیمیشن می باشد  . اگر به آموزشهای طراحی قالب دقت کرده باشید ، برای ساخت یک تصویر انیمیشن باید از یک سری نرم افزار یا با استفاده از جی کوئری اینکار صورت میگرفت که کمی کار زمان بر و سختی بود اما با استفاده از ویژگی Animation به راحتی می توانیم به تصاویر و المنت های دلخواه ، با انیمیشن افکت بدهیم .
تا به حال با نرم افزار فتوشاپ و فلش بنر طراحی کرده اید ؟ برای حرکت دادن اجزا همیشه باید یک فریم ایجاد کنیم . در Css3  نیز قبل از ساخت انیمیشن باید با Keyframe آشنا شوید .
Keyframe چیست ؟ بوسیله Keyframe مشخص می کنیم که در چه زمانی باید چه تغییراتی درون Css انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .
اینترنت اکسپلورر 10 , موزیلا یا همان فایرفاکس ، سافاری ، کروم و اوپرا از این ویژگی پشتیبانی می کنند.
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد . 


به دستورات زیر توجه کنید

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}}
@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background: red;}
to {background: yellow;}
}

  Animation در Css3

پس از آنکه حرکت مورد نظر را با @keyframes تعریف کردید نوبت آن است که آن را که نامش مثلاً Animation1 است ، به یک div متصل کنید .

برای انجام دادن آن شما باید دو کار انجام دهید :
نام انیمیشن را تعریف کنید مثلاً Animation1
مدت زمان انیمیشن
به این نکته دقت داشته باشید ، در صورتیکه هیچ زمانی داده نشود هیچ افکتی بر روی کادر یا تصویر مورد نظر اعمال نمی شود .

 

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

 
کد اصلی قسمت بالا . (کد اصلی را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>به کادر زیر دقت کنید</p>
<div></div>
</body>
</html>

 

دمو این قسمت

در CSS Animation چه خبر است ؟

انیمیشن افکتی است که نشان دهنده تغییر حالت یک المنت به حالت دیگر است .
شما هرچقدر که بخواهید می توانید حالت را تغییر دهید .
تغییرات را میتوانید به صورت درصد یا کلمه های کلیدی from و to بیان کنید .
0% ابتدای انیمیشن و 100% انتهای آن است .

به مثال های زیر توجه کنید .(کد اصلی را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
به این مثال دقت کنید
<div></div>
</body>
</html>

 

دمو این قسمت

 یک مثال دیگر

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
به مثال زیر توجه کنید
<div></div>
</body>
</html>

 

دمو این قسمت

به مثال زیر توجه کنید



<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
به مثال زیر توجه کنید
<div></div>
</body>
</html>

 

دمو این قسمت

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:44

نوشتن دیدگاه

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

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا