در این قسمت از فیلم آموزش CSS3 در مورد انیمیشن ها آموزش داده ایم . در این فیلم آموزش animation اول در مورد این که انیمیشن چیست و چرا از اون استفاده می کنیم توضیحاتی رو داده ایم و سپس نحوه استفاده از اون رو آموزش داده ایم .
Animation ( انیمیشن ) چیست ؟
انیمیشن یا متحرک سازی این امکان رو در css به ما میده که استایل عناصر رو به تدریج از حالتی به حالتی دیگر تغییر بدیم . شما می تونید اکثر ویژگی های CSS رو با استفاده از انیمیشن در زمان مشخصی که می خواید تغییر بدید .
برای اینکه بتونید یک انیمیشن واسه اون عنصری که میخواید درست بکنید باید تغییرات ویژگی های اون رو در یک keyframes@ تعریف بکنید و از اون فریم های کلیدی استفاده بکنیم . در استفاده از این keyframes از انتخابگر های from و to استفاده می کنیم که from برای حالت اولیه است و to برای حالتی است که می خواهیم عنصر مورد نظر اون ویژگی هارو داشته باشه .
کد CSS زیر رو مشاهده بکنید :
/* تعریف انیمیشن */
@keyframes your-animation-name {
/* استایل های مربوط به انیمیشن */
}
/* اعمال انیمیشن روی عنصر */
.element {
animation-name: your-animation-name;
}
برای هر keyframes باید یک اسم مشخص بکنید و اون اسم رو هم با استفاده از ویژگی animation-name به اون عنصر مورد نظر بدید تا انیمیشن شما اجرا بشه .
ویژگی animation-duration :
این ویژگی مشخص کننده زمان اجرای انیمیشن است که شما می توانید برای اجرای هر انیمیشن خود بر حسب ثانیه زمان مشخص بکنید .
ویژگی animation-delay : این ویژگی در انیمیشن میزان تاخیر رو مشخص می کنه . برای مقدار دادن به اون هم می تونید از ثانیه استفاده بکنید . بقیه ویژگی ها رو می تونید در فیلم آموزش animation مشاهده بکنید که کامل توضیح داده شده است .
کد HTML :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> </div> </body> </html>
کد CSS :
div{
width: 100px;
height:100px;
position: relative;
background-color: blue;
animation-name: mydiv;
animation-duration: 3s;
}
@keyframes mydiv{
0% {
top:0;
left: 0;
}
25% {
top:0;
left: 200px;
background-color: green;
}
50% {
top:200px;
left: 200px;
background-color: blue;
}
75% {
top:200px;
left: 0;
background-color: yellow;
}
100% {
top:0;
left:0;
background-color: red;
}
}
اگر کدهای بالا را اجرا کنید یک انیمیشن ساده را ملاحضه می کنید که در فیلم آموزش animation به صورت کامل آن را توضیح داده ایم .
در جلسه قبل هم که آموزش Transition رو گفته بودم می تونید از اون استفاده کنید و زیبایی صفحه وب خودتون رو دو چندان کنید .
عالی بود مرسی
بسیار عالی . متشکر.
درود بر شما
سپاس از آموزش های کامل و عالیتون
متاسفانه لینک دانلود نمایش داده نمیشه
سلام استاد گرانقدر
این قسمت 9 سی اس اس چرا باز نمیشه؟
درباره cubi_bizi کد. م فیلم فرمودین کامل توضیح میدم بشدت نیاز دارم بهش ممنونم از لطفتون استاد بزرگوار
ممنونم ازتون موفق باشین
واقعا دست استاد طوماری و سایت Web30ty درد نکنه دمتون گرم بخاطر آموزش هاتون که رایگان
در وب سایت عزیز Web30ty قرار دادید واقعان متشکرم از شما. . .
چرا این فیلم پخش نمیشه
بسیار عالی بود بیان بسیار روان و شیوا بود خیلی متشکرم.
مرسی از انرژی مثبتتون
حتما باید یاد بگیرم کد اماده نداره؟
اگه jquery بلد باشید خیلی آسونه .
سایتای بزرگ برای ارسال مطلب جدید اچ تی ام ال رو ویرایش میکنن. و اونوقت برای دیده شدن مطلب نیاز به رفرش نداره. وقتی من همینکارو میکنم برای دیده شدن مطلب باید رفرش کنم. چرا؟ ایا نیازی به نوشتن پی اچ پی یا چیز دیگه ای داره؟
سلام
برای اینکه بدون رفرش تو صفحه یه عملی انجام بدین میتونید از Ajax استفاده بکنید .
منظورم این بود که سی اس اس قبلی رو لود میکنه و برای لود شدن سی اس اس جدید باید صفحه رو رفرش کرد. الان هیچ راهی به جز پاک کردن کش و رفرش برای نشون دادن سی اس اس جدید نیست؟
خب وقتی یه استایل جدید به صفحه میدید باید اون رو رفرش بکنید تا نشون بده ، اگه به صورت آنلاین دارید صفحه وب رو درست می کنید بهتون پیشنهاد می کنم تو لوکال هاست صفحه رو بسازید و بعد به سایتتون اضافه کنید .
سایتتون هم خوبه اگه بخواید می تونید مطالبتون رو تو وب سیتی هم انتشار بدید .
سلام. وقتی یه فایل سی اس اس جدید یا اچ تی ام ال جدید میسازیم و بعد تو هاست آپلودش میکنیم و ریپلیس بشه بعدش با مرورگر میری تو سایت تغییری نکرده. و سی اس اس جدید رو لود نکرده وقتی لود میکنه که صفحه رو رفرش کنی. چکار باید کرد؟
سلام
کامل متوجه نشدم ، شاید صفحه سایتتون تو مرورگر کش شده و همون استایل های قبلی رو نشون میده ، اگه کش مرورگر رو پاک کنید نشون میده .