GirlwithBigHead

Tutorial : Image Hover #17

18/12/2013 | 0 comments

Preview :

Template Designer :
i.) Cari perkataan img { atau yang sama macam code tu dan delete code tersebut.
ii.) Copy code dekat bawah and paste kan dekat tempat yang sama.

Blogskins :
i.) Cari perkataan img { atau yang sama macam code tu dan delete code tersebut.
ii.) Copy code dekat bawah and paste kan dekat tempat yang sama.

img{
-webkit-transition: 1.0s!important;
-moz-transition: 1.0s!important;}

img:hover{
-webkit-animation: rotatee .5s alternate linear;
-webkit-transition: 1.0s!important;
-moz-transition: 1.0s!important;
}

@-webkit-keyframes rotatee {

10% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    }

20% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    }
    
50% {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    }
    
75% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    }
  
80% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    }

100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    }
}

OLDER NEWER