» » » Image Swap Animation with Using CSS Keyframes

Info Tentang Image Swap Animation with Using CSS Keyframes Update Terbaru 2017 Gratis

Sedikit Info Seputar Image Swap Animation with Using CSS Keyframes Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Image Swap Animation with Using CSS Keyframes , kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Animasi, Artikel HTML/CSS, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Image Swap Animation with Using CSS Keyframes Full Update Terbaru
link: Image Swap Animation with Using CSS Keyframes
"jangan lupa baca juga artikel dari kami yang lain dibawah"

Artikel Terbaru Image Swap Animation with Using CSS Keyframes Update Terlengkap 2017

Few weeks ago I posted a tutorial about Awesome Jquery Rotate Effect For Blogger Images. Actually you can add that image rotating to your side bar with some special image, who want to make their blog attractive.Anyway,Today im gonna explain about,Make Image swap animation with using CSS key-frames. Most of every new browsers are support with this effect. You can add this to blogger side bar by resizing images.Im just using CSS for this swapping effect. CSS code is too long for this widgets.Hope you can understand it.if you have any problem regarding to this tutorial let me know.


Image+swap+animation

Make Image swap animation with using CSS


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code. (You can add any Names for Title )

<style>
.btcontainer {
position: relative;margin: 30px;height: 250px;width: 550px;float: left;}
/*Photo Border*/
.imagebt1, .imagebt2 {
border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
.imagebt1 {
-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.imagebt2 {
  left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
/*HOVERS*/
.btcontainer:hover {
  cursor: pointer;}
.btcontainer:hover .imagebt1 {
  -webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate;
}
.btcontainer:hover .imagebt2 {
  -webkit-animation: imagebt2 1.5s 2 alternate;
     -moz-animation: imagebt2 1.5s 2 alternate;
      -ms-animation: imagebt2 1.5s 2 alternate;
       -o-animation: imagebt2 1.5s 2 alternate;
          animation: imagebt2 1.5s 2 alternate;}
@keyframes "imagebt1" {
 0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }}
@-moz-keyframes imagebt1 {
 0% {
   -moz-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {
   -moz-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {
   -moz-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-webkit-keyframes "imagebt1" {
 0% {
   -webkit-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {
   -webkit-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {
   -webkit-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-ms-keyframes "imagebt1" {
 0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@-o-keyframes "imagebt1" {
 0% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
 }
 50% {-o-transform: rotate(-14deg);transform: rotate(-14deg);
 }
 100% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
 }
}
@keyframes "imagebt2" {
 0% {
    left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
    left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {
    left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {
    left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-moz-keyframes imagebt2 {
 0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
   left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {
   left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {
   left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-webkit-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {
   left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-ms-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg);
 }
}
@-o-keyframes "imagebt2" {
 0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg);
 }
 49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg);
 }
 50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg);
 }
 100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg);
 }
}
</style>

<div class="btcontainer">
  <img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSjWMZocPFXFJIfCzvPWlCy2wQCtOyB5vNXrq4UbuIjFS997n_Gy7BnVDKouuAkzaYGtDGz9eVgOUnyhRdgrFpk-Xn5w3Lztwv4c-wBaVPjDPWtCLHuh0EhmGnQajfprJ9EWupKKWxtE/s1600/image1bt.jpg" alt="">
  <img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cEOsOigOvrZnW5fNZOerVKOi9E1whjAzHQ427EiDYiBBFLk5NanLgtiR9obvMaoxUjKWI13ffNswetP3ai9SkkRIXMdMAW5ecTBgR-9yzpgF1Fp99gviqiG4TRUOc5q4YRaDe1RaYa0/s1600/image2bt.jpg" alt="">
</div>
You can change above two urls for changing your images.

5. Now save your HTML/Javascript'. You are done...
If you need any help for Image Swap Animation Widget, Just leave a comment.

Itulah sedikit Artikel Image Swap Animation with Using CSS Keyframes terbaru dari kami

Semoga artikel Image Swap Animation with Using CSS Keyframes yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Artikel Tentang Image Swap Animation with Using CSS Keyframes