CSS3 انیمیشن

[s2/mri]

سلام

با اجازه اساتید میخوام اموزش ساخت یک اسلایدر عکس فقط با CSS3 بذارم. امیدوارم به کارتون بیاد

قبل از هرچیزی میریم سراغ اشنایی با انیمیشن ها

keyframes

مهمترین بخش یک انیمیشن keyframes ها هستند .keyframes تعیین میکنند انیمیشن در هر لحظه چه خصوصیاتی داشته باشد، از کجا به کجا حرکت کند و چه استایل هایی در هر لحظه بگیرد. زمانی که شما در زمان های متفاوت استایل های متفاوت به یک شی بدهبد به تبع در صورت اجرا.ان شی حالت انیمیشن پیدا خواهد کرد


@keyframes animationname {keyframes-selector {css-styles;}}


animationname نام انیمیشنی هست که قراره این خصوصیات روی ان اعمال بشه

keyframes-selector شما توسط keyframes-selector موقعیت انیمیشن در هر لحظه رو تعیین میکنید
مقادیر درصدی (درصد اجرای انیمیشن و هم چنین مقادیر from از لحظه شروع تا to پایان انیمیشن)

بهتره از مقادیر درصدی استفاده کنین چون کنترل بیشتری روی اجرای انیمیشن دارین

css-styles هم که استایل های مورد نظر شماست

منبع (http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)
----------------------------------------------------------------------------------------------------------
animation-name:your name;
این تابع نام انیمیشن را تعیین میکند. نام انیمیشن باید باid تگی که قراره انیمیشن رو اجرا و همچنین داخل keyframes یکی باشد

منبع (http://www.w3schools.com/cssref/css3_pr_animation-name.asp)
----------------------------------------------------------------------------------------------------------
animation-iteration-count
تعدادتکرار انیمیشن را تعیین میکند . مقدار infinite یعنی تکرار برای همیشه شما می توانید به ان عدد هم بدهید و تعداد تکرار را خودتان مشخص کنید

منبع (http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp)
----------------------------------------------------------------------------------------------------------
animation-timing-function
زمان، نحوه و سرعت انجام تابع
--
linear
سرعت یکنواخت. با همان سرعتی که انیمیشن شروع میشود با همان سرعت به پایان برسد
--
ease
انیمیشن با سرعتی اهسته شروع ، حرکت سریعی قبل از به اتمام رسیدن انیمیشن دارد و در اخر سرعت ان کم میشود
--
ease-in
انیمیشن با سرعتی اهسته شروع و سرعت ان بیشتر میشود
--
ease-out
عکس مقدار بالایی است به این صورت که سرعت انیمیشن در ابتدا زیاد و در انتها کم میشود
--
ease-in-out
تقریبا شبیه به ease است
--
cubic-bezier(n,n,n,n)
به جای n میتوانید مقادیری از صفر تا یک را قرار داده و خودتان سرعت اجرای ان را تعیین کنید


cubic-bezier(0,0,1,1) = linear


منبع (http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp)
---------------------------------------------------------------------------------------------------------
animation-duration
زمان کلی اجرای انیمیشن را تعیین میکند. یک مقدار براساس ثانیه


animation-duration:5s;


منبع (http://www.w3schools.com/cssref/css3_pr_animation-duration.asp)
---------------------------------------------------------------------------------------------------------
animation-play-state
این تابع تعیین میکند که انیمیشن در حال اجرا(running) باشد یا توقف(paused) نماید

منبع (http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp)
---------------------------------------------------------------------------------------------------------
transition-property
این تابع تعیین میکند که انیمیشن روی چه صفاتی اعمال شود
all : انیمیشن روی همه صفات اعمال شود
none : هیچ صفتی این انیمیشن اعمال نشود
property : شما می توانید صفات مورد نظر را بنویسید تا انیمیشن روی ان ها اعمال شود


transition-property:width,height;


منبع (http://www.w3schools.com/cssref/css3_pr_transition-property.asp)
-------------------------------------------------------------------------------------------------------
transition-timing-function
چگونگی سرعت انیمیشن در مدت زمان اجرا را معیین میکند
همان مقادیرanimation-timing-function را میگیرد

منبع (http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp)
-------------------------------------------------------------------------------------------------------
transition-delay
این تابع تعیین میکند که انیمیشن با چه تاخیری شروع شود

منبع (http://barnamenevis.org/www.w3schools.com/cssref/css3_pr_transition-delay.asp)
------------------------------------------------------------------------------------------------------

[s2/mri]

شرمنده بابت طولانی بودن ، گفتم پست های اضافه نزنم

خب حالا که با انیمیشن ها اشنا شدیم بریم برا طراحی یک اسلایدر ساده با CSS3

اول از همه میریم سراغ کد HTML


<div id="slidercontainer">
<div id="css3slider">
<img src="img/img01.jpg">
<img src="img/img02.jpg">
<img src="img/img03.jpg">
<img src="img/img04.jpg">
</div>
</div>
خب در این قسمت ما 4 تا عکس داریم . که عکس های اسلایدر رو تشکیل میدن داخل 2 تا div
slidercontainer : همون طور که از نامش پیداس کل اسلایدر رو در بر گرفته
css3slider : و این div که همون نام انیمیشنمون هست

این از استایل های slidercontainer

div#slidercontainer {
position: relative;
overflow: hidden;
background: #000;
}
div#slidercontainer {
width: 764px;
height: 341px;
}

div#slidercontainer img {
width: 768px;
height: 341px;
float: left;
}
div#slidercontainer:after {
content: "❚❚";
font-size: 150px;
position: absolute;
z-index: 12;
color: rgba(255,255,255, 0);
left: 300px; top: 80px;
-webkit-transition: 1s all ease-in-out;
-ms-transition: 1s all ease-in-out;
-moz-transition: 3s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 3s all ease-in-out;
}

div#slidercontainer:hover:after {
color: rgba(255,255,255, 0.6);
}



و استایل های css3slider


div#css3slider {
position: absolute;
width:3900px;
-webkit-animation-name:slider;
-webkit-animation-duration:15s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:15s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:15s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:15s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}

div#css3slider:hover {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused; }
}

div#css3slider img {
float: right;
}


ودر نهایت keyframes ها

@-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}

@-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}

@-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; } 70% { left: -1536px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}

@keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; } 70% { left: -1536px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}


با توجه به توضیحاتی که دادم فک نکنم توضیحی خاصی داشته باشه . اگه سوالی بود در خدمتیم

فقط یک نکته اونم این که سایز عکس ها 768px x 341px هست اگه سایز عکس هاتون متفاوته باید خیلی از کد ها رو تغییر بدین

اینم منبع (http://demosthenes.info/blog/495/Make-A-CSS3-Animated-Image-Slider) جایی که این اسلایدر رو براتون گذاشتم و این کل فایل ها در یک فایل (http://uplod.ir/gej0mku9emd2/css3_slider.7z.htm)

[refugee]

چرا دکمه عقب و جلو و اسلایدر شمار نداره ؟

[s2/mri]

چرا دکمه عقب و جلو و اسلایدر شمار نداره ؟

انشاا... تو آموزش های بعدی(اگه اموزشی باشه!) میذارم.

[danial.saeedi]

سلام دوست عزیز ممنون از اموزش خوبتون.
تا اون جایی که من می دونم دکمه عقب و برگشت رو نمی تونیم با css3 بسازیم اگه من اشتباه می کنم شما بگید.

[s2/mri]

سلام

چرا که نه!!

امکانش هست ، یه نگاه به اینجا (https://gist.github.com/AMKohn/3909565)بندازید /* این کد من نیست ولی اگه جاییش به مشکل برخوردید بپرسید ، متاسفانه وقت چندانی برای ارائه ندارم . وگرنه توضیح کاملتری میدادم */

اینجا (http://idesignow.com/css/20-awesome-css3-image-slider-gallery-tutorials.html#.UtPMBfvz9dg)هم یه چندتا اسلایدر معرفی کرده . شاید به دردتون بخوره



موفق باشید

[L E N A]

سلام جناب s2/mri
لطف میکنین دکمه عقب و جلو هم براش بذارین ؟! :لبخندساده:
ممنون