Is it Possible to Randomize an Animation in CSS? - css

Question

The following animation is run over three different elements.
How could I randomize the animation such that they occur at different times?
#keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
http://jsfiddle.net/nqQc7/1186/
Also, there appears to be a delay between the animations. How can I speed up the duration between animations without increasing the speed of the transition itself?
I have tried adding more keyframes but it doesn't seem to increase the time between animations.

Answer 1

You can use different animation-delay and animation-duration values for each button like below:
/**
* Icon
*/
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }
/**
* The "shine" element
*/
.icon:after {
animation: shine 1s ease-in-out alternate infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:nth-child(1):after { animation-delay: .1s; }
.icon:nth-child(2):after { animation-delay: .3s; }
.icon:nth-child(3):after { animation-delay: .5s; }
/* Hover state - trigger effect */
/* Active state */
#keyframes shine{
60% {
top: -30%;
left: -30%;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
}
}
let
it
shine
<!--
Forked by:
Nicolas Gallagher - http://jsfiddle.net/KbNq7/
Chris Coyier - http://jsfiddle.net/chriscoyier/hk6z9/1/
-->