Skip to content

Instantly share code, notes, and snippets.

@vitalybe

vitalybe/index.html

Created November 24, 2014 20:50
Show Gist options
  • Save vitalybe/95ab639f8629f7a25b50 to your computer and use it in GitHub Desktop.
Save vitalybe/95ab639f8629f7a25b50 to your computer and use it in GitHub Desktop.
Download ZIP
Vitaly final // source http://jsbin.com/moqocu/15
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vitaly final" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
div {
height: 100px;
width: 100px;
background: blue;
border-radius: 50% 50% 50% 0;
margin-right: 20px;
display: inline-block;
}
.class {
-webkit-animation: rotation 8s infinite;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
18.75% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
43.75% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
68.75% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
93.75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.delay0 {
-webkit-animation-delay: -7.5s;
}
.delay1 {
-webkit-animation-delay: -5s;
}
.delay2 {
-webkit-animation-delay: -2.5s;
}
.delay3 {
-webkit-animation-delay: 0s;
}
</style>
</head>
<body>
<h1>Generated via <a href="https://docs.google.com/spreadsheets/d/1blm2bdkjtnZzIfYhtkf7DGJbvuIECG-CD3qmAwUotBs/edit">spreadsheet</a></h1>
<div class="element-animation class delay0"></div>
<div class="element-animation class delay2"></div>
<div class="element-animation class delay1"></div>
<div class="element-animation class delay3"></div>
<script id="jsbin-source-css" type="text/css">div {
height: 100px;
width: 100px;
background: blue;
border-radius: 50% 50% 50% 0;
margin-right: 20px;
display: inline-block;
}
.class { -webkit-animation: rotation 8s infinite; }
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
18.75% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(90deg); }
43.75% { -webkit-transform: rotate(90deg); }
50% { -webkit-transform: rotate(180deg); }
68.75% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(270deg); }
93.75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.delay0 { -webkit-animation-delay: -7.5s; }
.delay1 { -webkit-animation-delay: -5s; }
.delay2 { -webkit-animation-delay: -2.5s; }
.delay3 { -webkit-animation-delay: 0s; }</script>
</body>
</html>
Raw
jsbin.moqocu.css
div {
height: 100px;
width: 100px;
background: blue;
border-radius: 50% 50% 50% 0;
margin-right: 20px;
display: inline-block;
}
.class {
-webkit-animation: rotation 8s infinite;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
18.75% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
43.75% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
68.75% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
93.75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.delay0 {
-webkit-animation-delay: -7.5s;
}
.delay1 {
-webkit-animation-delay: -5s;
}
.delay2 {
-webkit-animation-delay: -2.5s;
}
.delay3 {
-webkit-animation-delay: 0s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment