متحرک سازی در CSS3
با استفاده از CSS3 می توانید عناصر را متحرک نمایید. این امکان می تواند جایگزین خوبی برای تصاویر متحرک، Flash و JavaScript باشد.
قانون keyframes@ در CSS3
برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.
keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.
پشتیبانی مرورگرها از قانون keyframes@ و خاصیت animation
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| @keyframes |  |  |  |  |  |
| animation | | | | | |
مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ و خصوصیت animation را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
مثال (متحرک سازی در CSS3)
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
خاصیت animation در CSS3
پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.
برای اتصال انیمیشن به یک عنصر، باید حداقل دو مقدار زیر را در خصوصیت animation تنظیم نمایید:
- نام انیمیشن
- مدت زمان انیمیشن
مثال (متحرک سازی در CSS3)
اتصال انیمیشن "myfirst" به عنصر <div>، با مدت زمان 5 ثانیه:
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
توجه: شما باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.
انیمیشن در CSS3 چیست؟
انیمیشن، افکتی است که اجازه می دهد، یک عنصر بتدریج از یک Style به Styleی دیگر تغییر کند.
شما می توانید Styleها و زمان های دلخواهتان را مشخص نمایید.
تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.
0% ابتدای انیمیشن و 100% انتهای آن است.
برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.
مثال (متحرک سازی در CSS3)
کل زمان اجرای انیمیشن 5 ثانیه است، زمانی که انیمیشن به 25% اجرای خود رسید، رنگ پس زمینه به زرد تغییر می کند و در 50% آبی و در پایان سبر خواهد شد:
{
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)
تغییر رنگ پس زمینه و مکان:
{
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
در جدول زیر، لیست تمام خصوصیت های انیمیشن و قانون keyframes@ آورده شده است:
| خاصیت | توضیحات | CSS |
|---|---|---|
| @keyframes | متحرک سازی را مشخص می کند. | 3 |
| animation | تمام خصوصیت های متحرک سازی بجز خصوصیت animation-play-state را بصورت مختصر مشخص می کند. | 3 |
| animation-name | نام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند. | 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" که تمام خصوصیت های انیمیشن برای آن تنظیم شده است:
{
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 تنظیم شده است:
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
من میخواستم بدونم که آیا ممکنه کد زیر را داخل java script در داخل تابع نوشت ؟ اگر آره که به چه صورت است؟ بعد از نوشتن آن در داخل تابع با استفده از تابع setinterval میخواهم بر طبق زمان داده شده مداوم در حال اجرا باشد. ممنون اگر کمکم کنین
/* 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;}
}
کد مورد نظر را در آدرس زیر ببینید:
codepen.io/sbaloot/pen/VvmKOR
بنده این طور تصور کردم که شما قصد دارید توسط جاوااسکریپت، انیمیشن را کنترل کنید.
http://codepen.io/prv/pen/VLqWyv
چند بار بررسی کردیم ولی پرشی مشاهده نمی شود.
در تابع _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:
ببینید، این امکان وجود نداره که برای یک عنصر، دوتا انیمیشن تعریف کنیم. برای حل این مشکل در درون عنصر div که شما ایجاد کردید ما یک عنصر div دیگه ایجاد کردیم و انیمیشن رنگ رو به اون اختصاص می دهیم.
چون که کدها کمی طولانی هستند، اونا رو در یک ادیتور آنلاین ایجاد کردیم به آدرس زیر:
codepen.io/sbaloot/pen/wajZyd
لطفا به اونجا بروید و کدهایی که مد نظرتون هست رو مطالعه کنید . اگر که سوالی داشتید، طبق این کدها لطفا اون رو مطرح کنید .
<!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="myFunction()" >Try it</button >
<script >
function myFunction() {
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s";
document.getElementById("myDIV").style.animation = "mynewmove 4s";
}
</script >
<div id="myDIV" ></div >
</body >
</html >
لطفا به مثال زیر مراجعه کنید:
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";
بله،
بعنوان مثال شما می تونید به صورت زیر عمل کنید:
<!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 >