انیمیشن ها در CSS باعث می شوند تا ما قادر به متحرک سازی عناصر در صفحات وب باشیم. قبل از ظهور CSS3 بیشتر متحرک سازی ها در دنیای وب بوسیله جاوا اسکریپت صورت می گرفت. از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن بوسیله CSS بسیار بهینه تر است.
برتری دیگر این است که می توانیم عناصر را متحرک سازی کنیم بدون اینکه به جاوا اسکریپت مسلط باشیم.
در این آموزش فصل قدم به قدم ساخت یک انیمیشن در CSS را فرا خواهیم گرفت.
(اگر با ترنزیشن ها آشنا نیستید اول به یادگیری آن بپردازید.)
بوسیله این دستور فریم های مختلف انیمیشن را می سازیم:
keyframes@سپس انیمیشن ساخته شده را به یک عنصر نسبت می دهیم:
animation-nameحال می توانیم تعیین کنیم که اجرای انیمیشن چه مدت زمان به طول بیانجامد:
animation-durationسرعت اجرای انیمیشن را می توان با این ویژگی کنترل کرد:
animation-timing-functionحتی می توانیم قبل از اجرای انیمیشن درنگ داشته باشیم:
animation-delayبا استفاده از این ویژگی می توانیم تعیین کنیم که انیمیشن چند بار تکرار شود:
animation-iteration-countآیا انیمیشن از اول به آخر اجرا شود یا از آخر به اول؟ و یا هر دو:
animation-directionمی توانیم انیمیشن را طوری تنظیم کنیم که مقادیر نهایی انیمیشن برای عنصر باقی بمانند, و همینطور می توانیم تعیین کنیم عنصر در زمان درنگ چه ویژگی هایی داشته باشد:
animation-fill-modeدوست دارید انیمیشن را در بین کار متوقف کنید و از همان جا دوباره به حرکت بیندازید؟ :)
animation-play-stateو در نهایت می توانیم تمام ویژگی های انیمیشن را بصورت مختصر در یک خط تنظیم کنیم:
animation
سلام
عالی بود پسر . . .
واقعا عالی بود ، آپولو هوا کردن که میگن ، همینه
اینم لینک Animation من:
Live view: http://codepen.io/ehsanamir…
Editor view: http://codepen.io/ehsanamir…
از افکتاش خیلی خوشم اومد. ممنون واسه معرفی. موفق باشی احسان جان
ممنون.
خواهش.
این طرح هم چند تا انیمیشن داره:
Live view: http://codepen.io/ehsanamir…
Editor view: http://codepen.io/ehsanamir…
سلام
برای ساخت متن های متحرک که از پایین شروع میشوند و به سمت بالا میان از ویژگی animation استفاده می شود چطور میتونیم loop را به animation اعمال کنیم .کدی که من نوشتم مقدار paused اعمال میشه ولی فقط به سمت بالا میاد وقتی هم forwards رو قرار میدم پرشش از بین نمیره.
اگر امکان دارد راهنمایی کنید.
ممنون
سلام. منکه اینطوری متوجه نمیشم.
باید یک دمو واسم بفرسید. لطفا از jsbin استفاده کنید
همون کدی ک الان کار نمیکنه رو بزارید توی jsbin.com بعدم آدرسو اینجا بنویسید
در سایتی (jsbin )که گفتین با اکانت وارد شدم اما جایی برای آپلود فایل نداره.
کافیه html تون رو توی قسمت html و CSS رو توی قسمت مربوط به خودش بنویسید. وقتی ک خروجی رو توی قسمت output دیدید URL رو کپی کنید اینجا بزاریدش. در ضمن نیاز به ثبت نام هم نیست ولی اگر ثبت نام کنید بعدا به همه کدهایی ک اونجا قرار میدین دسترسی خواهید داشت
خروجی رو نمایش میده ولی متن حرکت نمیکنه.
این آدرس در url میاد:
http://jsbin.com/?html,css,…
لینک رو اشتباه فرستادید. ببینید وقتی همه کد رو کپی کردین اونجا برای اینکه مطمین بشین که ذخیره شده روی صفحه کیک کنید بعد ctrl + S رو بزنید یک url ساخته میشه. اونو بزارید اینجا.
http://jsbin.com/dofofipiqo…
مقدار delay رو تو کد استفاده نکردم ولی متن متحرک اولش یه تایمی ثابت می مونه .
ممنون
الان مشکل این فقط مکثی هست که اولش داره؟ اگر همینه, مشکل از مقادیر keyframe هاتون هستش. دقیقتر تعیین بشن درست میشه و مکث نداره.
ساخت carousel بدون کد js امکان پذیر هست؟
فقط با css میشه ؟
بله. برای حالت autoplya که همین روش شما جواب میده.
برای کلیدها و کنترل ها قبل و بعد هم دو راه هست یکی استفاده از انتخابگر target
http://www.cssscript.com/pu…
یکی هم استفاده از checkbox و یا radio
https://codepen.io/koheishi…
https://codepen.io/paulnobl…
در مورد استفاده از target این مطلب رو ببینید:
http://css-tricks.ir/css_re…
و برای استفاده از checkbox این مطلب شروع خوبیه:
http://css-tricks.ir/?p=431
ممنون
برای ساخت carousel ،اسلایدری که در سایت دیجی کالا هست قسمت پر بازدیدترین ها ، هم با روشی که شما گفتید درست میشه؟ منظورم اینکه بدون jq انجام بشه.
این توضیح در مورد اون اسلایدر درسته :
مثلا (شش تا محصول )سه تا از محصول ها رو در یک دیو و سه ایتم رو در یک دیو دیگر قرار بدیم زمانیکه رو فلشهای طرفین کلیک میشه حرکت کنه
کدی که من نوشتم حرکت می کنه وای مخفی نمیشه و دیو دوم هم حرکت نمی کنه.عکس مربوط به ایتمها رو نمیدونم چطور بفرستم.
http://jsbin.com/vuhegihiku…
میخوای مخفی بشه به #logo اینو اضافه کن :
overflow-x: hidden;
سلام . خیلی خیلی ممنون به خاطر آموزش های عالی تون .
پی دی افی دارید که این اموزش ها همه داخل ش باشن . برای اینکه راحت تر بتونیم بخونیم ؟
سلام. نه، ولی می تونید هر مطلبی رو بصورت pdf با استفاده از مرورگرتون ذخیره کنید.
و یک نکته کوچولو: شما در آینده می خواید توسعه دهنده وب بشید. باید بتونید توی همون محیط هم آموزش ببینید. هر صفحه یا سایتی رو که سر بزنید و بخونید خودش یک تجربه میشه واستون.
موفق باشید.
سلام، بالا نوشتید که:
از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن بوسیله CSS بسیار بهینه تر است.
خب وقتی با جاوا اسکریپت می نوشتیم کنترل توالی با کی بود؟ خب اونم مرورگر هست دیگه، نه؟
سلام خسته نباشید من هنگامی که یک انیمیشن را به یک عنصر اعمال میکنم دیگر نمیتوانم به بقیه عنصر ها هیچگونه انیمیشنی بدهم حتی انیمیشنی که به آن عنصر داده ام و کار هم میکند ولی اگر به عنصر دیگری همان را بدهم کار نمیکند میشه لطفا راهنمایی کنید با تشکر
سلام.
یک دمو توی سایت هایی مثل codepen.io یا jsbin.com درست کنید لینکشو همینجا بزارید تا بتونم کمکتون کنم.
باتشکر فراوان مشکلم حل شد
دوستان خدایی چند نفر سعی کردین با inspect موشکه رو بگیرین
توام؟
خخخخ
بهترین سایت یادگیری css دست همتون درد نکنه
سلام.ببخشیدمن یه انیمیشن میخوام کخه دو تا جسم گرد داخل هم با حرکات دایره مخالف بچرخن.میشه بگید چطور بنویسم؟وبع ایمیلم ارسال کنید.
سلام، شاید این کمکتون کنه
https://css-tricks.ir/?p=5657
فوق العاده
سلام استا چی میشه همی دوره هاره چند وقت free عرضه کنید…مممنون
فقط میگم خدا خیرت بده که انقد کامل و قشنگ و با مثال توضیح دادی و انقد وقت گزشتی و رایگان منتشر کردی.
خیلی ممنونتم گلِ من :)
🙄🤣🤣🤣