Skip to content

Instantly share code, notes, and snippets.

@AndrwM

AndrwM/index.html

Created March 13, 2014 20:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AndrwM/9535821 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AndrwM/9535821 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Transform Test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/230/254">
<img src="http://lorempixel.com/400/245">
<img src="http://lorempixel.com/440/200">
<img src="http://lorempixel.com/43/200">
<img src="http://lorempixel.com/4030/200">
<img src="http://lorempixel.com/4003/200">
<img src="http://lorempixel.com/42/200">
<img src="http://lorempixel.com/420/200">
<img src="http://lorempixel.com/450/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/470/200">
<img src="http://lorempixel.com/480/200">
<img src="http://lorempixel.com/490/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/430/200">
<img src="http://lorempixel.com/4010/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/401/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/408/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/800/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/100/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/230/254">
<img src="http://lorempixel.com/400/245">
<img src="http://lorempixel.com/440/200">
<img src="http://lorempixel.com/43/200">
<img src="http://lorempixel.com/4030/200">
<img src="http://lorempixel.com/4003/200">
<img src="http://lorempixel.com/42/200">
<img src="http://lorempixel.com/420/200">
<img src="http://lorempixel.com/450/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/470/200">
<img src="http://lorempixel.com/480/200">
<img src="http://lorempixel.com/490/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/430/200">
<img src="http://lorempixel.com/4010/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/401/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/408/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/800/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/100/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/230/254">
<img src="http://lorempixel.com/400/245">
<img src="http://lorempixel.com/440/200">
<img src="http://lorempixel.com/43/200">
<img src="http://lorempixel.com/4030/200">
<img src="http://lorempixel.com/4003/200">
<img src="http://lorempixel.com/42/200">
<img src="http://lorempixel.com/420/200">
<img src="http://lorempixel.com/450/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/470/200">
<img src="http://lorempixel.com/480/200">
<img src="http://lorempixel.com/490/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/430/200">
<img src="http://lorempixel.com/4010/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/401/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/408/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/800/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/100/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/230/254">
<img src="http://lorempixel.com/400/245">
<img src="http://lorempixel.com/440/200">
<img src="http://lorempixel.com/43/200">
<img src="http://lorempixel.com/4030/200">
<img src="http://lorempixel.com/4003/200">
<img src="http://lorempixel.com/42/200">
<img src="http://lorempixel.com/420/200">
<img src="http://lorempixel.com/450/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/470/200">
<img src="http://lorempixel.com/480/200">
<img src="http://lorempixel.com/490/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/430/200">
<img src="http://lorempixel.com/4010/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/401/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/408/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/800/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/100/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/600/200">
<img src="http://lorempixel.com/700/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/500/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/200/200">
<img src="http://lorempixel.com/300/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/230/254">
<img src="http://lorempixel.com/400/245">
<img src="http://lorempixel.com/440/200">
<img src="http://lorempixel.com/43/200">
<img src="http://lorempixel.com/4030/200">
<img src="http://lorempixel.com/4003/200">
<img src="http://lorempixel.com/42/200">
<img src="http://lorempixel.com/420/200">
<img src="http://lorempixel.com/450/200">
<img src="http://lorempixel.com/460/200">
<img src="http://lorempixel.com/470/200">
<img src="http://lorempixel.com/480/200">
<img src="http://lorempixel.com/490/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/430/200">
<img src="http://lorempixel.com/4010/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/401/200">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/408/200">
<img src="http://lorempixel.com/400/200">
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
position: relative;
}
body {
background: #fff;
}
img:nth-child(even) {
-webkit-animation: move 3s ease infinite;
-moz-animation: move 3s ease infinite;
display: block;
}
img:nth-child(odd) {
-webkit-animation: move2 2s ease infinite;
-moz-animation: move2 2s ease infinite;
display: block;
}
@-webkit-keyframes move {
50% {
-webkit-transform: translate3d(1000px, 0, 0) scale(2);
opacity: 0.4;
}
75% {
opacity: 1;
-webkit-transform: translate3d(100px, 0, 0) scale(.3) rotate(0.5turn);
}
90% {
opacity: .5;
-webkit-transform: translate3d(160px, 0, 0) scale(.8) rotate(0.9turn);
}
}
@-webkit-keyframes move2 {
50% {
-webkit-transform: translate3d(10px, 0, 0) scale(1);
opacity: 0.4;
}
50% {
opacity:.8;
-webkit-transform: translate3d(1000px, 0, 0) scale(.3) rotate(0.3turn);
}
90% {
opacity: .2;
-webkit-transform: translate3d(160px, 0, 0) scale(.9) rotate(0.2turn);
}
}
@-moz-keyframes move {
50% {
-moz-transform: translate3d(1000px, 0, 0) scale(2);
opacity: 0.4;
}
75% {
opacity: 1;
-moz-transform: translate3d(100px, 0, 0) scale(.3) rotate(0.5turn);
}
90% {
opacity: .5;
-moz-transform: translate3d(160px, 0, 0) scale(.8) rotate(0.9turn);
}
}
@-moz-keyframes move2 {
50% {
-moz-transform: translate3d(10px, 0, 0) scale(1);
opacity: 0.4;
}
50% {
opacity:.8;
-moz-transform: translate3d(1000px, 0, 0) scale(.3) rotate(0.3turn);
}
90% {
opacity: .2;
-moz-transform: translate3d(160px, 0, 0) scale(.9) rotate(0.2turn);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment