body {
margin: 20px;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
.box {
width: 100px;
height: 100px;
display: inline-block;
border: 2px solid black;
margin: 10px;
opacity: 0.1;
}
.a {
background: orange;
}
.b {
background: red;
}
.c {
background: yellow;
}
button {
background: wheat;
border: 1px solid black;
font-family: 'Lato';
border-radius: 5px;
padding: 8px;
margin: 20px 0;
outline: none;
cursor: pointer;
}
var theBoxes = document.querySelectorAll(".box");
var startButton = document.querySelector(".start");
var animateOpacity = KUTE.allFromTo(
theBoxes,
{ opacity: 1 },
{ opacity: 0.1 },
{ offset: 700 }
);
startButton.addEventListener(
"click",
function() {
animateOpacity.start();
},
false
);