Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/.block

Last active June 14, 2018 20:10
Show Gist options
  • Save jalapic/86b18e7583d4c8e89151c7ecce82e040 to your computer and use it in GitHub Desktop.
Save jalapic/86b18e7583d4c8e89151c7ecce82e040 to your computer and use it in GitHub Desktop.
Download ZIP
css animation
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
background: #000;
}
h3 {
color: #81d4b9;
}
#lights {
width:800px
}
.bulb {
width: 50px;
height: 50px;
display: inline-block;
float: left;
margin: 15px 10px;
border-radius: 50% 2px;
transform: rotate(-45deg);
}
.bulb:nth-child(odd) {
background: #6CB6FF;
opacity: 1;
box-shadow: 1px 1px 15px #6CB6FF, -1px -1px 15px #6CB6FF;
animation: bulb-pulse-1 0.9s linear 0s infinite alternate;
}
.bulb:nth-child(even) {
background: #ffa319;
opacity: 1;
box-shadow: 1px 1px 15px #ffa319, -1px -1px 15px #ffa319;
animation: bulb-pulse-2 0.9s linear 0s infinite alternate;
}
@keyframes bulb-pulse-1 {
from {box-shadow: 1px 1px 15px #6CB6FF, -1px -1px 15px #6CB6FF; }
to { box-shadow: none; opacity: .3;}
}
@keyframes bulb-pulse-2 {
from { box-shadow: none; opacity: .3;}
to {box-shadow: 1px 1px 15px #ffa319, -1px -1px 15px #ffa319; }
}
</style>
</head>
<body>
<h3>CSS Animation</h3>
<h3>click to remove</h3>
<div id ="lights" style="text-align:center;">
<div class="bulb"></div>
<div class="bulb"></div>
</div>
<script>
for(var i=0; i < 75; i++){
var bulb = document.createElement("div");
bulb.className = "bulb";
document.getElementById("lights").appendChild(bulb);
}
d3.selectAll(".bulb").on("click",
function(d) {
d3.select(this)
.transition()
.duration(2500)
.style("opacity", 0)
.style("background", "#000")
//.style("box-shadow", "none")
.style("animation", "none")
;
}
);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment