"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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/donovanh/pen/pvMeeB?limit=all&page=16&q=animation" /> <style class="cp-pen-styles">.logo { width: 8em; position: absolute; left: 1em; top: 1em; } span { display: block; position: absolute; top: calc(50% - 10em); left: calc(50% - 10em); width: 20em; height: 20em; } span.spin { -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } span.spin-reverse { -webkit-animation: spin 30s linear infinite; animation: spin 30s linear infinite; } span.pulse { -webkit-animation: spin-pulse 20s linear infinite; animation: spin-pulse 20s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spin { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes spin-pulse { 0% { -webkit-transform: scale(1) rotateZ(0); transform: scale(1) rotateZ(0); } 50% { -webkit-transform: scale(0.9) rotateZ(180deg); transform: scale(0.9) rotateZ(180deg); } 100% { -webkit-transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg); } } @keyframes spin-pulse { 0% { -webkit-transform: scale(1) rotateZ(0); transform: scale(1) rotateZ(0); } 50% { -webkit-transform: scale(0.9) rotateZ(180deg); transform: scale(0.9) rotateZ(180deg); } 100% { -webkit-transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg); } } body { background: #fff; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; font-size: 24px; } .circle { border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 12.5em); -webkit-transform-origin: 50% 12.5em; transform-origin: 50% 12.5em; } .squircle { border-radius: 25%; } .circle, .squircle { width: 12.5em; height: 12.5em; position: absolute; border-top: 0.1em solid rgba(255, 255, 255, 0.4); } .large.circle { box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5); } .small { width: 4em; height: 4em; left: calc(50% - 2em); top: calc(50% - 15em); -webkit-transform-origin: 50% 15em; transform-origin: 50% 15em; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); } .one { background: rgba(16, 63, 236, 0.75); -webkit-transform: rotateZ(225deg); transform: rotateZ(225deg); } .two { background: rgba(37, 172, 162, 0.75); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .three { background: rgba(233, 124, 32, 0.75); -webkit-transform: rotateZ(135deg); transform: rotateZ(135deg); } .four { background: rgba(235, 67, 35, 0.75); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .five { background: rgba(190, 28, 65, 0.75); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .six { background: rgba(208, 57, 159, 0.75); -webkit-transform: rotateZ(0); transform: rotateZ(0); } .seven { background: rgba(150, 32, 198, 0.75); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .eight { background: rgba(95, 33, 203, 0.75); -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .small.squircle { background: none; box-shadow: none; } .small.squircle::after { content: ""; border-radius: 25%; width: 100%; height: 100%; position: absolute; background: red; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); box-shadow: -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.2); } .small.squircle.two::after { background: rgba(37, 172, 162, 0.75); } .small.squircle.four::after { background: rgba(235, 67, 35, 0.75); } .small.squircle.six::after { background: rgba(208, 57, 159, 0.75); } .small.squircle.eight::after { background: rgba(95, 33, 203, 0.75); } .large.squircle { position: absolute; background: rgba(30, 7, 66, 0.65); border: none; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em; -webkit-transform: none; transform: none; } .large.squircle.one { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .content { text-align: center; } .content svg { fill: #fff; width: 3em; margin: 1.25em auto 1em; } .content h1 { font-weight: lighter; font-size: 1.75em; margin: 0.25em auto 1em; max-width: 6em; } .message { position: absolute; left: 1em; bottom: 1em; right: 0; color: #222; text-align: left; } .message a { text-decoration: none; font-weight: bold; color: #999; } </style></head><body> <a href="/" class="logo"><img src="//cssanimation.rocks/images/logo.svg"></a> <article class="wwdc"> <span class="spin"> <!-- Large Circles --> <div class="large circle one"></div> <div class="large circle two"></div> <div class="large circle three"></div> <div class="large circle four"></div> <div class="large circle five"></div> <div class="large circle six"></div> <div class="large circle seven"></div> <div class="large circle eight"></div> </span> <span class="pulse"> <!-- Small Shapes --> <div class="small circle one"></div> <div class="small squircle two"></div> <div class="small circle three"></div> <div class="small squircle four"></div> <div class="small circle five"></div> <div class="small squircle six"></div> <div class="small circle seven"></div> <div class="small squircle eight"></div> </span> <!-- Squircles --> <span class="spin-reverse"> <div class="large squircle one"></div> </span> <div class="large squircle two"> <div class="content"> <svg viewBox="0 0 160 164" xmlns="http://www.w3.org/2000/svg"> <g> <g id="svg_1"> <path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/> </g> </g> </svg> <h1>The epicenter of change.</h1> <p><strong>WWDC</strong>15</p> </div> </div> </article> <p class="message">Learn how to do this and other CSS animation<br><a href="//cssanimation.rocks/courses/animation-101/" target="_blank">Join my email course</a></p> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/* CSSAnimation.rocks Learn all about CSS animation with my email course: https://cssanimation.rocks/courses/animation-101/ */ //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: