Skip to content

Instantly share code, notes, and snippets.

@shaan360

shaan360/index.html

Created September 6, 2012 15:28
Show Gist options
  • Save shaan360/3657377 to your computer and use it in GitHub Desktop.
Save shaan360/3657377 to your computer and use it in GitHub Desktop.
Download ZIP
Another experiment with CSS animations. This time incorporating background-size. Click the buttons in the upper left to toggle blur layer visibility on/off. Full version here: http://ericanton.net/nothing
Raw
index.html
<div id="blur"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div class="bubbleSmall"></div>
<div id="hide" onclick="document.getElementById('blur').style.display = 'none';"/></div>
<div id="show" onclick="document.getElementById('blur').style.display = 'inline';"/></div>
Raw
script.js
//Another experiment with CSS animations. This time incorporating background-size.
//Click the buttons in upper left to toggle blur layer visibility on/off
//A strange bug is happening. This Pen looks fine in Safari, but when you view it as a web page here: http://ericanton.net/nothing , only in Safari the background position within the bubbles gets messed up. It is exactly the same code, except the Pen uses a cropped version of the background images to accomodate the wider viewing area. Any help would be greatly appreciated!
Raw
style.css
html {
background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#blur {
background: url(http://ericanton.net/nothing/nothing_blur_codepen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top:0px;
left:0px;
height: 100%;
width: 100%;
z-index: -1;
}
#show {
z-index: 999;
background-color: #FFFFFF;
opacity: 0.2;
height: 50px;
width: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
cursor: help;
}
#hide {
z-index: 999;
background-color: #FFFFFF;
opacity: 0.1;
height: 50px;
width: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
cursor: help;
}
.bubbleSmall {
background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
cursor: help;
height: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
animation-name: bubbleSmall;
animation-duration: 1.25s;
animation-direction: linear;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: bubbleSmall;
-webkit-animation-duration: 1.25s;
-webkit-animation-direction: linear;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bubbleSmall;
-moz-animation-duration: 1.25s;
-moz-animation-direction: linear;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-o-animation-name: bubbleSmall;
-o-animation-duration: 1.25s;
-o-animation-direction: linear;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
}
@keyframes bubbleSmall {
0% {opacity: 0.5; top:100%; width:25px;}
100% {opacity: 0.2; top:0%; width:50px;}
}
@-moz-keyframes bubbleSmall {
0% {opacity: 0.5; top:100%; width:25px;}
100% {opacity: 0.2; top:0%; width:50px;}
}
@-webkit-keyframes bubbleSmall {
0% {opacity: 0.5; top:100%; width:25px;}
100% {opacity: 0.2; top:0%; width:50px;}
}
@-o-keyframes bubbleSmall {
0% {opacity: 0.5; top:100%; width:25px;}
100% {opacity: 0.2; top:0%; width:50px;}
}
.bubbleMedium {
background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
cursor: help;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
animation-name: bubbleMedium;
animation-duration: 1.75s;
animation-direction: linear;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: bubbleMedium;
-webkit-animation-duration: 1.75s;
-webkit-animation-direction: linear;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bubbleMedium;
-moz-animation-duration: 1.75s;
-moz-animation-direction: linear;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-o-animation-name: bubbleMedium;
-o-animation-duration: 1.75s;
-o-animation-direction: linear;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
}
@keyframes bubbleMedium {
0% {opacity: 0.5; top:100%; width:50px;}
100% {opacity: 0.2; top:0%; width:100px;}
}
@-moz-keyframes bubbleMedium {
0% {opacity: 0.5; top:100%; width:50px;}
100% {opacity: 0.2; top:0%; width:100px;}
}
@-webkit-keyframes bubbleMedium {
0% {opacity: 0.5; top:100%; width:50px;}
100% {opacity: 0.2; top:0%; width:100px;}
}
@-o-keyframes bubbleMedium {
0% {opacity: 0.5; top:100%; width:50px;}
100% {opacity: 0.2; top:0%; width:100px;}
}
.bubbleLarge {
background: url(http://ericanton.net/nothing/nothing_codepen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
height: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
animation-name: bubbleLarge;
animation-duration: 2s;
animation-direction: linear;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: bubbleLarge;
-webkit-animation-duration: 2s;
-webkit-animation-direction: linear;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bubbleLarge;
-moz-animation-duration: 2s;
-moz-animation-direction: linear;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-o-animation-name: bubbleLarge;
-o-animation-duration: 2s;
-o-animation-direction: linear;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
}
@keyframes bubbleLarge {
0% {opacity: 1.0; top:100%; width:100px;}
100% {opacity: 0.2; top:0%; width:200px;}
}
@-moz-keyframes bubbleLarge {
0% {opacity: 1.0; top:100%; width:100px;}
100% {opacity: 0.2; top:0%; width:200px;}
}
@-webkit-keyframes bubbleLarge {
0% {opacity: 1.0; top:100%; width:100px;}
100% {opacity: 0.2; top:0%; width:200px;}
}
@-o-keyframes bubbleLarge {
0% {opacity: 1.0; top:100%; width:100px;}
100% {opacity: 0.2; top:0%; width:200px;}
}
.bubbleLarge:nth-child(1){
left:45%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
.bubbleLarge:nth-child(2){
left:75%;
animation-delay: .6s;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-o-animation-delay: .6s;
}
.bubbleLarge:nth-child(3){
left:5%;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
}
.bubbleLarge:nth-child(4){
left:25% !important;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
}
.bubbleLarge:nth-child(5){
left:90%;
animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
}
.bubbleMedium:nth-child(6){
left:90%;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-o-animation-delay: 1.4s;
}
.bubbleMedium:nth-child(7){
left:35%;
animation-delay: .4s;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-o-animation-delay: .4s;
}
.bubbleMedium:nth-child(8){
left:65%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
.bubbleMedium:nth-child(9){
left:75%;
animation-delay: .4s;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-o-animation-delay: .4s;
}
.bubbleMedium:nth-child(10){
left:15%;
animation-delay: .5s;
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
-o-animation-delay: .5s;
}
.bubbleSmall:nth-child(11){
left:30%;
animation-delay: .2s;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-o-animation-delay: .2s;
}
.bubbleSmall:nth-child(12){
left:40%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
.bubbleSmall:nth-child(13){
left:25%;
animation-delay: .2s;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-o-animation-delay: .2s;
}
.bubbleSmall:nth-child(14){
left:10%;
animation-delay: .1s;
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-o-animation-delay: .1s;
}
.bubbleSmall:nth-child(15){
left:20%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
.bubbleSmall:nth-child(16){
left:60%;
animation-delay: .1s;
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-o-animation-delay: .1s;
}
.bubbleSmall:nth-child(17){
left:70%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
.bubbleSmall:nth-child(18){
left:55%;
animation-delay: .1s;
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-o-animation-delay: .1s;
}
.bubbleSmall:nth-child(19){
left:85%;
animation-delay: .1s;
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-o-animation-delay: .1s;
}
.bubbleSmall:nth-child(20){
left:90%;
animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment