HTML Example 3: Creating HTML Slider using CSS Animation

Creating HTML Slider by Using CSS Animation


By adding this style and div you can easily add an animated slider in HTML.


in this tutorial you will learn how to add Slider in your website by using simple CSS Animation, using @keyframes, animation-name, animation-duration, animation-iteration-count, animation-timing-function, animation-direction.

just added border-radius to add style in this slider.


Code

<style>
.myslider
{
border-radius:20px;
border:dotted;
width:700px;
height:400px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBRmOFJL8ifm0nkBHqYO0hCCjbL_aNsK7Gy6kTYO3wSo6Hmc_fjXyaQ5IJG6TO0AiZ0YsQKbCwW1MY_KIPodCWh8sr1TRkbZRp1ZI6cU72VXbBdk9LD00bhyphenhyphenoUybXWtyEkjgCP3Qv_kRt2/s1600/Allamaiqbal.jpg);
background-size:700px 400px;
animation-name:myfrm2;
animation-duration:20s;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
animation-direction:alternate;
}
@keyframes myfrm2
{
0%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBRmOFJL8ifm0nkBHqYO0hCCjbL_aNsK7Gy6kTYO3wSo6Hmc_fjXyaQ5IJG6TO0AiZ0YsQKbCwW1MY_KIPodCWh8sr1TRkbZRp1ZI6cU72VXbBdk9LD00bhyphenhyphenoUybXWtyEkjgCP3Qv_kRt2/s1600/Allamaiqbal.jpg);
}
20%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHo3f3rAVKVEUwQ1WM8-V4YejTHIXlw6LmKYUNugM6EE-j_jVBJ2GuuPWBoVbsJH0YTiSQSYVjgPDFWJFN_0PqJFHbdaAdWiTXyxus-HxXgcFed7QTBjl3C4f76gwjTXAG6wpW_lQGK4S/s1600/badshahimosque.jpg);
}
40%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA04kvzVfasxVRK1bSrWIcysr5_m5Mr7ukmxXkwHcaDzMOiFxRuBEDpQnoLcjTF6zDxIP69i5YM41Z7uIpvcFKyi0bsJIDQ09jUofBbbG7cMAln-XcyjowwQZY0_zWshF2B7z-SqMHEa5D/s1600/isl.jpg);
}
60%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_s2ubNkwaIWLHddDeuWc_1zB94BcogzCN9gORU89FF_SION2eZ2OjsPosDtgsjd1NaNFZjpiaVTIjbKwedd9rR3njFovB_8FJMqd_aj5r7LSX6BarzftrxfhiO4v9QkwV-z9spAmbdM1b/s1600/khyberpass.jpg);
}
80%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZLTHNfS67s8xaZxuIr0V9HrbRlSsAsLDTFO6yheBe0cbIxr_pKCzvqsZMbmN92yT3xfNroWgp7EU4Yr4cIpvKCb7ZZnSjFY0slahMS9QPxx3nt1I6r1xnLsTtzKBZ7L6W5u7GHcyX5th/s1600/quaideazam.jpg);
}
100%
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBRmOFJL8ifm0nkBHqYO0hCCjbL_aNsK7Gy6kTYO3wSo6Hmc_fjXyaQ5IJG6TO0AiZ0YsQKbCwW1MY_KIPodCWh8sr1TRkbZRp1ZI6cU72VXbBdk9LD00bhyphenhyphenoUybXWtyEkjgCP3Qv_kRt2/s1600/Allamaiqbal.jpg);
}
}
</style>
<br />
<div class="myslider">
</div>

Sample