<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/davidicus/pen/dDAqC?limit=all&page=32&q=animation" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:300,400,900);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
html,
body {
font-family: "Lato", sans-serif;
font-size: 90%;
height: 100%;
width: 100%;
}
@media (min-width: 37.5em) {
html,
body {
font-size: 100%;
}
}
.section {
background: #EF4836;
display: table;
height: 100%;
min-height: 43.75em;
position: relative;
width: 100%;
}
@media (max-height: 40em) {
.section {
display: block;
padding-top: 4em;
}
}
.section__wrap {
display: table-cell;
vertical-align: middle;
width: 100%;
}
@media (max-height: 40em) {
.section__wrap {
display: block;
}
}
.section h1 {
color: #fff;
font-size: 1.8em;
font-weight: 300;
margin: 1em auto .5em;
text-align: center;
}
@media (min-width: 37.5em) {
.section h1 {
font-size: 2em;
}
}
p {
color: #c92210;
font-size: .75em;
text-align: center;
transform: translateY(4em);
}
p a {
color: #c92210;
}
.center {
background: #fff;
border-radius: 50%;
height: 22em;
margin: 1em auto;
overflow: hidden;
position: relative;
width: 22em;
}
.part {
position: absolute;
border: 0 solid transparent;
}
.part-1 {
background: #1c699d;
left: 50%;
transform: translateX(-50%);
z-index: 15;
animation: part1 5s infinite;
animation-timing-function: cubic-bezier(0.6, 1.5, 0.6, 1);
}
.part-2 {
background: #fff;
border-radius: 0.25em;
display: table;
left: 50%;
text-align: center;
transform: translateX(-50%);
z-index: 10;
animation: part2 5s infinite;
animation-timing-function: cubic-bezier(0.6, 1.5, 0.6, 1);
}
.part-2 span {
color: #3498DB;
display: table-cell;
font-weight: 700;
vertical-align: middle;
animation: code 5s infinite;
animation-timing-function: cubic-bezier(0.6, 1.5, 0.6, 1);
}
.part-3 {
background: #3498DB;
border-radius: 0.625em;
left: 50%;
transform: translateX(-50%);
z-index: 9;
animation: part3 5s infinite;
animation-timing-function: cubic-bezier(0.6, 1.5, 0.6, 1);
}
@-moz-keyframes part1 {
0%, 5% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
15%, 25% {
border-radius: 3.75em;
height: 1.5em;
top: 14.875em;
width: 1.5em;
}
35%, 45% {
border-radius: 3.75em;
height: 1.5em;
top: 16.5625em;
width: 1.5em;
}
55%, 65% {
border-radius: 6.25em;
height: 1.25em;
top: 15.625em;
width: 15.625em;
}
75%, 85% {
border-radius: 6.25em;
height: 1.25em;
top: 17.1875em;
width: 5.625em;
}
95%, 100% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
}
@-webkit-keyframes part1 {
0%, 5% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
15%, 25% {
border-radius: 3.75em;
height: 1.5em;
top: 14.875em;
width: 1.5em;
}
35%, 45% {
border-radius: 3.75em;
height: 1.5em;
top: 16.5625em;
width: 1.5em;
}
55%, 65% {
border-radius: 6.25em;
height: 1.25em;
top: 15.625em;
width: 15.625em;
}
75%, 85% {
border-radius: 6.25em;
height: 1.25em;
top: 17.1875em;
width: 5.625em;
}
95%, 100% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
}
@keyframes part1 {
0%, 5% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
15%, 25% {
border-radius: 3.75em;
height: 1.5em;
top: 14.875em;
width: 1.5em;
}
35%, 45% {
border-radius: 3.75em;
height: 1.5em;
top: 16.5625em;
width: 1.5em;
}
55%, 65% {
border-radius: 6.25em;
height: 1.25em;
top: 15.625em;
width: 15.625em;
}
75%, 85% {
border-radius: 6.25em;
height: 1.25em;
top: 17.1875em;
width: 5.625em;
}
95%, 100% {
border-radius: 0;
height: 0.3125em;
top: 13em;
width: 1.5625em;
}
}
@-moz-keyframes part2 {
0%, 5% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
15%, 25% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 6.0625em;
width: 4.75em;
}
35%, 45% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 11.25em;
top: 4.6875em;
width: 6.875em;
}
55%, 65% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 5.9375em;
width: 13.5em;
}
75%, 85% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 9.375em;
top: 5.9375em;
width: 15em;
}
95%, 100% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
}
@-webkit-keyframes part2 {
0%, 5% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
15%, 25% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 6.0625em;
width: 4.75em;
}
35%, 45% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 11.25em;
top: 4.6875em;
width: 6.875em;
}
55%, 65% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 5.9375em;
width: 13.5em;
}
75%, 85% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 9.375em;
top: 5.9375em;
width: 15em;
}
95%, 100% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
}
@keyframes part2 {
0%, 5% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
15%, 25% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 6.0625em;
width: 4.75em;
}
35%, 45% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 11.25em;
top: 4.6875em;
width: 6.875em;
}
55%, 65% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 8.125em;
top: 5.9375em;
width: 13.5em;
}
75%, 85% {
border: 0 solid #3498DB;
border-radius: 0.5em;
height: 9.375em;
top: 5.9375em;
width: 15em;
}
95%, 100% {
border: 0.25em solid #3498DB;
border-radius: 0.5em;
height: 3.125em;
top: 9.375em;
width: 3.125em;
}
}
@-moz-keyframes part3 {
0%, 5% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
15%, 25% {
border-radius: 0.625em;
height: 11.875em;
top: 5em;
width: 6.625em;
}
35%, 45% {
border-radius: 0.625em;
height: 15em;
top: 3.75em;
width: 8.75em;
}
55%, 65% {
border-radius: 0.625em;
height: 10em;
top: 5em;
width: 15em;
}
75%, 85% {
border-radius: 0.625em;
height: 11.25em;
top: 5em;
width: 16.875em;
}
95%, 100% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
}
@-webkit-keyframes part3 {
0%, 5% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
15%, 25% {
border-radius: 0.625em;
height: 11.875em;
top: 5em;
width: 6.625em;
}
35%, 45% {
border-radius: 0.625em;
height: 15em;
top: 3.75em;
width: 8.75em;
}
55%, 65% {
border-radius: 0.625em;
height: 10em;
top: 5em;
width: 15em;
}
75%, 85% {
border-radius: 0.625em;
height: 11.25em;
top: 5em;
width: 16.875em;
}
95%, 100% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
}
@keyframes part3 {
0%, 5% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
15%, 25% {
border-radius: 0.625em;
height: 11.875em;
top: 5em;
width: 6.625em;
}
35%, 45% {
border-radius: 0.625em;
height: 15em;
top: 3.75em;
width: 8.75em;
}
55%, 65% {
border-radius: 0.625em;
height: 10em;
top: 5em;
width: 15em;
}
75%, 85% {
border-radius: 0.625em;
height: 11.25em;
top: 5em;
width: 16.875em;
}
95%, 100% {
border-radius: 0.3125em;
height: 9.375em;
top: 6.4375em;
width: 2.5em;
}
}
@-moz-keyframes code {
0%, 5% {
font-size: 1em;
}
15%, 25% {
font-size: 1.5625em;
}
35%, 45% {
font-size: 2.1875em;
}
55%, 65% {
font-size: 2.8125em;
}
75%, 85% {
font-size: 3.4375em;
}
95%, 100% {
font-size: 1em;
}
}
@-webkit-keyframes code {
0%, 5% {
font-size: 1em;
}
15%, 25% {
font-size: 1.5625em;
}
35%, 45% {
font-size: 2.1875em;
}
55%, 65% {
font-size: 2.8125em;
}
75%, 85% {
font-size: 3.4375em;
}
95%, 100% {
font-size: 1em;
}
}
@keyframes code {
0%, 5% {
font-size: 1em;
}
15%, 25% {
font-size: 1.5625em;
}
35%, 45% {
font-size: 2.1875em;
}
55%, 65% {
font-size: 2.8125em;
}
75%, 85% {
font-size: 3.4375em;
}
95%, 100% {
font-size: 1em;
}
}
</style></head><body>
<section class="modernWeb section">
<div class="modernWrap section__wrap">
<h1>I design for the modern web.</h1>
<div class="center">
<div class="part part-1"></div>
<div class="part part-2"><span>{ }</span></div>
<div class="part part-3"></div>
</div>
<p>Follow me on Twitter <a target="_blank" href="https://twitter.com/Dave_Conner">@Dave_Conner</a></p>
</div>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body></html>
