Skip to content

Instantly share code, notes, and snippets.

@Saminou24

Saminou24/Animating-CSS3-Filters.markdown

Created October 25, 2013 11:30
Download ZIP

Revisions

  1. Saminou24 created this gist Oct 25, 2013.
    7 changes: 7 additions & 0 deletions Animating-CSS3-Filters.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Animating CSS3 Filters
    ----------------------
    Just playing with some CSS filters and how they animate.

    A [Pen](http://codepen.io/Saminou24/pen/hiHma) by [Saminou yengue kizidi](http://codepen.io/Saminou24) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/Saminou24/pen/hiHma/license).
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <p>Playing with CSS Filters and Transitions<p>

    <img width="250" class="blur" src="http://placekitten.com/250/250" />

    <img width="250" class="hue" src="http://placekitten.com/250/250" />

    <img width="250" class="saturate" src="http://placekitten.com/250/250" />

    <img width="250" class="brightness" src="http://placekitten.com/250/250" />

    <img width="250" class="omgwtfbbq" src="http://placekitten.com/250/250" />

    46 changes: 46 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    body {background-color:#000;color:#fff;text-align:center;}

    .blur {
    -webkit-animation: blur 3s infinite;
    }

    @-webkit-keyframes blur {
    0%, 100% { -webkit-filter: blur(0px); }
    50% { -webkit-filter: blur(10px); }
    }

    .hue {
    -webkit-animation: hue 3s infinite;
    }

    @-webkit-keyframes hue {
    0%, 100% { -webkit-filter: hue-rotate(0deg); }
    50% { -webkit-filter: hue-rotate(180deg); }
    }

    .saturate {
    -webkit-animation: saturate 3s infinite;
    }

    @-webkit-keyframes saturate {
    0%, 100% { -webkit-filter: saturate(none); }
    50% { -webkit-filter: saturate(10); }
    }

    .brightness {
    -webkit-animation: brightness 3s infinite;
    }

    @-webkit-keyframes brightness {
    0%, 100% { -webkit-filter: brightness(none); }
    50% { -webkit-filter: brightness(10); }
    }

    .omgwtfbbq {
    -webkit-animation: omgwtfbbq 3s infinite;
    }

    @-webkit-keyframes omgwtfbbq {
    0%, 100% { -webkit-filter: blur(0px) brightness(none) hue-rotate(0deg) saturate(none); }
    50% { -webkit-filter: brightness(10) blur(10px) hue-rotate(180deg) saturate(10); }
    }