Skip to content

Instantly share code, notes, and snippets.

@i-arindam

i-arindam/jsbin.oKuRUse.css

Created October 6, 2013 19:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save i-arindam/6857820 to your computer and use it in GitHub Desktop.
Save i-arindam/6857820 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.oKuRUse.css
@keyframes spin{
0% { transform:rotate(0) scale(1) }
25% { transform:rotate(360deg) scale(.9) }
50% { transform:rotate(720deg) scale(.8) }
75% { transform:rotate(720deg) scale(.9) }
100% { transform:rotate(720deg) scale(1) }
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0) scale(1) }
25% { -moz-transform:rotate(360deg) scale(.9) }
50% { -moz-transform:rotate(720deg) scale(.8) }
75% { -moz-transform:rotate(360deg) scale(.9) }
100% { -moz-transform:rotate(0deg) scale(1) }
}
.slide img:hover{
-moz-animation-name:spin;
-moz-animation-duration:5000ms;
-moz-animation-iteration-count:2;
-moz-animation-timing-function: ease-in;
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0) scale(1) }
25% { -webkit-transform:rotate(360deg) scale(.9) }
50% { -webkit-transform:rotate(720deg) scale(.8) }
75% { -webkit-transform:rotate(360deg) scale(.9) }
100% { -webkit-transform:rotate(0deg) scale(1) }
}
.slide img:hover{
-webkit-animation-name:spin;
-webkit-animation-duration:5000ms;
-webkit-animation-iteration-count:2;
-webkit-animation-timing-function: ease-in;
}
Raw
jsbin.oKuRUse.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Timeline Example</title>
<style>
.main{
width:100%;
height:500px;
position:absolute;
overflow:hidden;
}
.slide{
display: block;
position:absolute;
width: 720px;
top:50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s;
}
.slide img{ width:266px; height:200px}
#slide1{
left:100px;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
#slide2{
left: 450px;
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="main">
<div id="slide1" class="slide" >
<img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/1070059_594773090562522_1517614574_n.jpg" />
</div>
<div id="slide2" class="slide" >
<img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/1070059_594773090562522_1517614574_n.jpg" />
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment