CSS3 Keyframes Slideshow
This is just example on what you can do with keyframes, its not tutorial, if You are not familiar with keyframes animation, CSS as language or HTML, click here : CSS3 Keyframes Full Tutorial || CSS Full Tutorial || HTML Full TutorialThe below keyframe code is only for Chrome and Safari but you can add support for mozilla, opera and IE by copying the code and adding the -moz-, -ms- and -o- vendor prefixes.
Note:
All those strange letters are just links. Dont thing about them.
Example:
<html>
<head>
<title>CSS3 @keyframes slideshow</title>
<style>
.slideShow {
width: 400px;
height: 200px;
border: 1px solid #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg);
background-repeat: no-repeat;
-webkit-animation: slideShow 15s 1s infinite alternate;
-moz-animation: slideShow 15s 1s infinite alternate;
-ms-animation: slideShow 15s 1s infinite alternate;
animation: slideShow 15s 1s infinite alternate;
}
// Chrome and Safari
@-webkit-keyframes slideShow {
0% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg) ;
}
25% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8yZaTmlCOwYv19X21lRL0z_03dOfIolPWw_kgms1Z5xmAjgMOXGjvOMLSALRYnxDz9SRT21_rLWirX3wlcxmY1E5Fqz9wuUs3KlTvm66FK-7gzPGEtu1ilkbHHm3Ewmut_o1ythYxMEr/w400-h200-p/elder.jpg) ;
}
50% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzLcaBwL47BE3Lf8Iqw4_ff8ST5Vr36ctxuJDwupbEQTdsRCXxvJZpW520-PT8aGgjlSdogF1o2JXvVMWhoWeJ1EPXNMiD9wBR8CJGNj9UOobo46pne2iCZFXp2nbUGGvlE6M9ULjVsFj/w400-h200-p/nfs.jpg) ;
}
75% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0EEEBImHDmjlnKZMApo9BtVVrsF14WYJA0w3ewBATEAToeuapGkV_BB9D4aDSmhFYZyIqaaCxzEynxDWpaUuMGV9mQSoCbYtnyj73B5Gb-UJhf8fvAxiKp7w5VdCvXRv5XcvV-FcMN9O/w400-h200-p/poseidon.jpg) ;
}
100% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHUnTqNYWUeFmpkg1UsuNamJLtLUkCYA74O5-Qj3r8k7wBvGU7wyHQBS2i87t4lWnF_zCDMgr_5AJzpOsN313-iGGAnUf5FHmHuX5AHaJKpatBn9hVESgBgyiaMWsvb97D8qBfNiUJsiw/w400-h200-p/tanks.jpg);
}
}
</style>
</head>
<body>
<div class="slideShow"></div>
</body>
</html>
LIVE DEMO
No comments:
Post a Comment