سبد خرید (0)

تبلیغات

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

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

Wiki

با استفاده از CSS3 می توانید عناصر را متحرک نمایید. این امکان می تواند جایگزین خوبی برای تصاویر متحرک، Flash و JavaScript باشد.


قانون keyframe[email protected] در CSS3

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون [email protected] را یاد بگیرید.

[email protected] جایی است که در آن انیمیشن ایجاد می شود. داخل [email protected] یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.


پشتیبانی مرورگرها از قانون [email protected] و خاصیت animation

Wiki

خاصیتپشتیبانی مرورگرها
@keyframes
animation

مرورگرهای Internet Explorer 10, Firefox, Opera قانون [email protected] و خصوصیت animation را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

مثال (متحرک سازی در CSS3)

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

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

خاصیت animation در CSS3

Wiki

پس از اینکه، انیمیشن را در قانون [email protected] تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.

برای اتصال انیمیشن به یک عنصر، باید حداقل دو مقدار زیر را در خصوصیت animation تنظیم نمایید:

  • نام انیمیشن
  • مدت زمان انیمیشن

مثال (متحرک سازی در CSS3)

اتصال انیمیشن "myfirst" به عنصر <div>، با مدت زمان 5 ثانیه:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
خودتان امتحان کنید »

توجه: شما باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.


انیمیشن در CSS3 چیست؟

Wiki

انیمیشن، افکتی است که اجازه می دهد، یک عنصر بتدریج از یک Style به Styleی دیگر تغییر کند.

شما می توانید Styleها و زمان های دلخواهتان را مشخص نمایید.

تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.

0% ابتدای انیمیشن و 100% انتهای آن است.

برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.

مثال (متحرک سازی در CSS3)

کل زمان اجرای انیمیشن 5 ثانیه است، زمانی که انیمیشن به 25% اجرای خود رسید، رنگ پس زمینه به زرد تغییر می کند و در 50% آبی و در پایان سبر خواهد شد:

@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;}
}
خودتان امتحان کنید »

مثال (متحرک سازی در CSS3)

تغییر رنگ پس زمینه و مکان:

@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;}
}
خودتان امتحان کنید »

خصوصیت های انیمیشن در CSS3

Wiki

در جدول زیر، لیست تمام خصوصیت های انیمیشن و قانون [email protected] آورده شده است:

خاصیتتوضیحاتCSS
@keyframes متحرک سازی را مشخص می کند. 3
animation تمام خصوصیت های متحرک سازی بجز خصوصیت animation-play-state را بصورت مختصر مشخص می کند. 3
animation-name نام انیمیشن که در قانون [email protected] ذکر شده است را مشخص می کند. 3
animation-duration زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است. 3
animation-timing-function نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است. 3
animation-delay زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است. 3
animation-iteration-count تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد) 3
animation-direction اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند) 3
animation-play-state توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است. 3

در دو مثال زیر، تمام خصوصیت های بالا استفاده شده است:

مثال (متحرک سازی در CSS3)

اجرای یک انیمیشن با نام "myfirst" که تمام خصوصیت های انیمیشن برای آن تنظیم شده است:

div
{
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;
}
خودتان امتحان کنید »

مثال (متحرک سازی در CSS3)

اجرای انیمیشن مثال قبل، که تمام تنظیمات قبلی در خصوصیت animation تنظیم شده است:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
خودتان امتحان کنید »

دیدگاه‌ها  

+3 # roqaye zabihi 1394-07-04 11:27
سلام آقای مهندس عباسی
من میخواستم بدونم که آیا ممکنه کد زیر را داخل java script در داخل تابع نوشت ؟ اگر آره که به چه صورت است؟ بعد از نوشتن آن در داخل تابع با استفده از تابع setinterval میخواهم بر طبق زمان داده شده مداوم در حال اجرا باشد. ممنون اگر کمکم کنین
/* Standard syntax */
@keyframes example {
0% {background-col or:red; left:0px; top:0px;}
25% {background-col or:yellow; left:200px; top:0px;}
50% {background-col or:blue; left:200px; top:200px;}
75% {background-col or:green; left:0px; top:200px;}
100% {background-col or:red; left:0px; top:0px;}
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-07-04 19:59
سلام ببینید یک انیمیشن دارای زمان اجرا می باشد، پس باید زمان اجرای تابع توسط دستور setInterval با زمان انیمیشن برابر باشد. البته در انیمیشن هایی که تکرار ندارند. به هر حال یک تابع برای شما ایجاد شد که با دادن دو نقطه به آن، یک مربع را از نقطه اول به نقطه دوم می برد(با استفاده از جاوااسکریپت).
کد مورد نظر را در آدرس زیر ببینید:
codepen.io/sbaloot/pen/VvmKOR

بنده این طور تصور کردم که شما قصد دارید توسط جاوااسکریپت، انیمیشن را کنترل کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ali salari 1394-05-10 22:00
سلام لطفا ینک زیر رو ببینید چرا css بعد از رسیدن به انتها پرش می کند
http://codepen.io/prv/pen/VLqWyv
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-05-12 09:45
سلام
چند بار بررسی کردیم ولی پرشی مشاهده نمی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # fm 1394-04-21 17:00
باز سلام و خسته نباشید یک نگاه به کد زیر بندازید من اینو نوشتم اما وقتی می خوام رو رادیو کلیک کنم تا رنگ در حین حرکت تغییر کنه نمیشه
در تابع _color چه چیزی باید نوشت. نحوه ارتباط Css با جاوا اسکریپت خیلی مهمه اما نمی دونم چرا هیچ سایتی به درستی اونو باز نمی کنه و فقط یکی دو مثال از آن هست





#shape{
width:150px;
height:150px;
background-color:red;
position:relative;
animation:speed 7s infinite;
animation-play-state:paused;
transition:7s all;
}
@keyframes speed{
from{left:0%;}
to{left:88%;}
}




function sta(){
document.getElementById("shape").style.animationPlayState="running";
}
function sto(){
document.getElementById("shape").style.animationPlayState="paused";
}
function _color(){

}



Color:
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # fm 1394-04-21 20:08
باز مرسی از توضیح هایتان کاملا متوجه شدم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # احسان عباسی 1394-04-21 18:23
سلام . ممنون
ببینید، این امکان وجود نداره که برای یک عنصر، دوتا انیمیشن تعریف کنیم. برای حل این مشکل در درون عنصر div که شما ایجاد کردید ما یک عنصر div دیگه ایجاد کردیم و انیمیشن رنگ رو به اون اختصاص می دهیم.
چون که کدها کمی طولانی هستند، اونا رو در یک ادیتور آنلاین ایجاد کردیم به آدرس زیر:
codepen.io/sbaloot/pen/wajZyd
لطفا به اونجا بروید و کدهایی که مد نظرتون هست رو مطالعه کنید . اگر که سوالی داشتید، طبق این کدها لطفا اون رو مطرح کنید .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # fm 1394-04-20 00:12
منظورم این نبود دستورات انیمیشنی به طور خودکار اجرا می شن راهی هست که این دستورات اجرا نشن با با کلیک اجرا شن (الان در همین لینکی که دادید مربع در حال حرکت است و وقتی رو دکمه کلیک می کنیم مسیر حرکت تغییر می کند ) اما من می خواهم مربع هیچ حرکتی نداشته باشد و وقتی روی دکمه کلیک می کنیم حرکت کند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-20 08:03
دقت کنید کد زیر رو طوری نوشتیم که با کلیک بر روی یک دکمه، انیمیشن اجرا شود:
<!DOCTYPE html >
<html >
<head >
<style >
#myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes mynewmove {
from {top: 0px;}
to {top: 200px;}
}

@keyframes mynewmove {
from {top: 0px;}
to {top: 200px;}
}
</style >
</head >
<body >

<button onclick="myFunc tion()" >Try it</button >

<script >
function myFunction() {
document.getEle mentById("myDIV ").style.Webkit Animation = "mynewmove 4s";
document.getEle mentById("myDIV ").style.animat ion = "mynewmove 4s";
}
</script >

<div id="myDIV" ></div >

</body >
</html >
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # fm 1394-04-19 19:18
سلام و خسته نباشید سایتتون خیلی عالیه اما توی این مبحث وقتی بخواهیم از جاوا اسکریپت هم استفاده کنیم یعنی یک دکمه بسازیم که وقتی روی آن کلیک می کنیم این خاصیت اجرا شه چگونه می شه چون این دستور به شکل خودکار اجرا می شود و نمی شود هیچ گونه این دستور را با توابع مرتبط کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-04-19 21:14
سلام ممنون
لطفا به مثال زیر مراجعه کنید:
www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_animation
در واقع شما باید از دستورات css در جاوااسکریپت استفاده کنید:
// Code for Chrome, Safari and Opera
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";

// Standard syntax
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # D 1394-04-17 16:08
سلام ببخشید می خواستم بدونم آیا میشه از ویژگی hover تو انمیشین استفاده کردبه طور مثال روی یک شی وقتی ویژگی Hover تعریف بشه انیمیشن اجرا شه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-17 16:34
سلام
بله،
بعنوان مثال شما می تونید به صورت زیر عمل کنید:
<!DOCTYPE html >
<html >
<head >
<style >
div
{
width:100px;
height:100px;
background:red;

}

div:hover
{
width:100px;
height:100px;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style >
</head >
<body >

<p ><b >Note:</b > This example does not work in Internet Explorer 9 and earlier versions.</p >

<div ></div >

</body >
</html >
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohammadd 1394-04-13 16:32
ببخشید خصوصیت alternate چه کار انجام میدهد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-13 17:18
همان طور که در جدول بالای مثال آخر آمده است، مقدار alternate انیمیشن را به صورت عکس تکرار می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان