Element Flickr CSS Animation

style.css

@keyframes link-shudder
{
    0%     { margin-bottom:0;}
    1%     { transform: translate(0px,0px); }
    2%     { transform: translate(-6px,-3px); }
    3%     { transform: translate(0px,0px); }
	10%     { filter:blur(0px);}
    15%     { filter:blur(3px);}
    20%     { filter:blur(0px);}
    27%     { transform: translate(0px,0px); }
    28%     { transform: translate(6px,0px); }
    29%     { transform: translate(0px,0px);}
    35%     { transform: translate(0px,0px);filter:blur(0px);}
    36%     { transform: translate(4px,4px); filter:blur(4px);}
    37%     { transform: translate(0px,0px); filter:blur(0px);}
    42%     { transform: translate(0px,0px); filter:blur(0px); }
    43%     { transform: translate(0px,4px); filter:blur(3px); }
    44%     { transform: translate(0px,0px); filter:blur(0px); }
    100%     { transform: translate(0px,0px);}
}

@keyframes subtle-blurs
{
    0%     { margin-bottom:0;}
	10%     { filter:blur(0px);}
    15%     { filter:blur(2px);}
    20%     { filter:blur(0px);}


    42%     { top:0; filter:blur(0px); }
    43%     { top:-2px; filter:blur(3px); }
    44%     { top:0; filter:blur(0px); }
    100%     { top:0;}
}

@keyframes link-shudder-less
{
    0%     { margin-bottom:0;}
    1%     { transform: translate(0px,0px);}
    2%     { transform: translate(-3px,1px); }
    3%     { transform: translate(0px,0px);}
    27%     { transform: translate(0px,0px); }
    28%     { transform: translate(3px,0px); }
    29%     { transform: translate(0px,0px);}
    35%     { transform: translate(0px,0px);}
    36%     { transform: translate(-3px,2px);}
    37%     { transform: translate(0px,0px);}
    42%     { transform: translate(0px,0px); }
    43%     { transform: translate(0px,2px); }
    44%     { transform: translate(0px,0px); }
    75%     { transform: translate(0px,0px); }
    76%     { transform: translate(3px,-1px); }
    77%     { transform: translate(0px,0px); }
    100%     { transform: translate(0px,0px);}
}

@keyframes standard-shudder
{
    0%     { margin-bottom:0;}
    1%     { transform: translate(0px,0px);}
    2%     { transform: translate(-10px,-6px); }
    3%     { transform: translate(0px,0px);}
    27%     { transform: translate(0px,0px); }
    28%     { transform: translate(14px,0px); }
    29%     { transform: translate(0px,0px);}
    35%     { transform: translate(0px,0px);}
    36%     { transform: translate(14px,10px);}
    37%     { transform: translate(0px,0px);}
    42%     { transform: translate(0px,0px); }
    43%     { transform: translate(0px,7px); }
    44%     { transform: translate(0px,0px); }
    65%     { transform: translate(0px,0px); }
    66%     { transform: translate(-10px,4px); }
    67%     { transform: translate(0px,0px); }
    100%     { transform: translate(0px,0px);}
}

@keyframes standard-flashing
{
    0%     { filter: brightness(1);}
    
    1%     { filter: brightness(1);}
    2%     { filter: brightness(1.3);}
    3%     { filter: brightness(1);}
    
    27%     { filter: brightness(1); }
    28%     { filter: brightness(0.9);}
    29%     { filter: brightness(1);}
    
    35%     { filter: brightness(1);}
    36%     { -filter: brightness(1.2);}
    37%     { filter: brightness(1);}
    
    42%     { filter: brightness(1); }
    43%     { filter: brightness(1.1); }
    44%     { filter: brightness(1); }
    
    65%     { filter: brightness(1); }
    66%     { filter: brightness(1.2); }
    67%     { filter: brightness(1); }
    
    100%     { filter: brightness(1); }
}

@keyframes flicker
{
    0%     { margin-bottom:0;}
    1%     { opacity:1;}
    2%     { opacity:0.3; }
    3%     { opacity:1;}

    62%     { opacity:1; }
    63%     { opacity:0.4;  }
    64%     { opacity:1; }
    
    75%     { opacity:1; }
    76%     { opacity:0.3; }
    77%     { opacity:1; }
    100%     { opacity:1;}
}


@keyframes throb
{
    0%     { transform: scale(1);}
    70%     { transform: scale(1.4);}
	100%     { transform: scale(1);}
}

@keyframes intense-shudder
{
    0%     { margin-bottom:0;}
    1%     { transform: translate(0px,0px);}
    2%     { transform: translate(-40px,-46px); }
    3%     { transform: translate(0px,0px);}
    10%     { transform: translate(0px,0px);}
    11%     { transform: translate(44px,30px);}
    12%     { transform: translate(0px,0px);}
    20%     { transform: translate(0px,0px); }
    21%     { transform: translate(-24px,0px); }
    22%     { transform: translate(0px,0px);}
    31%     { transform: translate(0px,0px);}
    32%     { transform: translate(34px,20px);}
    33%     { transform: translate(0px,0px);}
    40%     { transform: translate(0px,0px); }
    41%     { transform: translate(0px,17px); }
    42%     { transform: translate(0px,0px); }
    51%     { transform: translate(0px,0px); }
    52%     { transform: translate(-40px,30px); }
    53%     { transform: translate(0px,0px); }
    61%     { transform: translate(0px,0px);}
    62%     { transform: translate(-40px,-46px); }
    63%     { transform: translate(0px,0px);}
    70%     { transform: translate(0px,0px);}
    71%     { transform: translate(44px,30px);}
    72%     { transform: translate(0px,0px);}
    80%     { transform: translate(0px,0px); }
    81%     { transform: translate(54px,0px); }
    82%     { transform: translate(0px,0px);}
    91%     { transform: translate(0px,0px);}
    92%     { transform: translate(-64px,60px);}
    93%     { transform: translate(0px,0px);}
    100%     { transform: translate(0px,0px);}
}