ccs3_6experiments

CSS 3 Animation Experiments

These are a few things I’ve been playing with using some of the new features in CSS 3, specifically animation. All of the experiments are done by applying CSS to a single div.

All are working in Firefox 11 and Chrome 25, with some small problems with CSS animation in Safari 6. In the code shown, I’ve removed all but the -webkit- prefixes to make it easier to read and understand.

  • Experiment 01

  • /* Experiment 01 */
    #div01 {
    position: absolute;
    border-radius: 50%;
    background:#81e0ef;
    width:100px; height: 100px;
    animation: hover 1s infinite alternate ease;
    }

    @-webkit-keyframes hover {
    from { top: 105px; left: 100px; -webkit-box-shadow: 0 200px 120px 0px black;}
    to { top: 95px; left: 100px; -webkit-box-shadow: 0 200px 100px 0px #666;}
    }

  • Experiment 02

  • /* Experiment 02 */
    #div02{
    position: absolute;
    background:#81e0ef;
    border-radius: 50%;
    width:100px; height: 100px;
    top: 100px; left: 100px;
    -webkit-animation: turnit 2s infinite ease-in-out;
    }

    @-webkit-keyframes turnit {
    0% {-webkit-transform:skew(85deg,0deg);}
    25% {-webkit-transform:skew(30deg,10deg);}
    50% {-webkit-transform:skew(0deg,0deg);}
    75% {-webkit-transform:skew(-10deg,-30deg);}
    100% {-webkit-transform:skew(0deg,85deg);}
    }

  • Experiment 03

  • /* Experiment 03 */
    #div03{
    position: absolute;
    background:#81e0ef;
    width:100px; height: 100px;
    top: 100px; left: 100px;
    border-radius: 50%;
    background: -webkit-linear-gradient(-45deg, transparent 25%, #81e0ef 25%, #81e0ef 50%, transparent 50%, transparent 75%, #81e0ef 75%);
    background-size: 20px 20px;
    -webkit-animation: barberpole 2s infinite linear;
    }

    @-webkit-keyframes barberpole {
    from {background-position: 0%;}
    to {background-position: 100%;}
    }

  • Experiment 04

  • /* Experiment 04 */
    #div04{
    position: absolute;
    background:#81e0ef;
    width:100px; height: 100px;
    top: 100px; left: 100px;
    border-radius: 50%;
    -webkit-animation: eyeball 3s infinite alternate linear;
    }

    @-webkit-keyframes eyeball {
    from {-webkit-box-shadow: inset -30px 0 70px 0px #666}
    to {-webkit-box-shadow: inset 30px 0 70px 0px #666;}
    }

  • Experiment 05

  • /* Experiment 05 */

    #div05, #div05:before, #div05:after {
    position: absolute;
    background: transparent;
    width:90px; height: 90px;
    top: 100px; left: 100px;
    border: 10px double #81e0ef;
    border-radius: 50%;
    -webkit-animation: fourCorner .5s infinite linear;
    }

    #div05:before {
    content: "";
    top: 4px; left: 4px;
    width: 62px; height: 62px;
    }

    #div05:after {
    content: "";
    top: 18px; left: 18px;
    width: 34px; height: 34px;
    }

    @-webkit-keyframes fourCorner {
    0% {border-color: #81e0ef; border-top-color: #0e99b2;}
    25% {border-color: #81e0ef; border-right-color: #0e99b2;}
    50% {border-color: #81e0ef; border-bottom-color: #0e99b2;}
    75% {border-color: #81e0ef; border-left-color: #0e99b2;}
    100% {border-color: #81e0ef; border-top-color: #0e99b2;}
    }

  • Experiment 06

  • /* Experiment 06 */
    #div06{
    position: absolute;
    background: #81e0ef;
    width:100px; height: 100px;
    top: 100px; left: 100px;
    border-radius: 50%;
    }

    #div06:before, #div06:after {
    content:"";
    position: absolute;
    top: 10px; left: -45px;
    height: 50px;
    width: 150px;
    border: 20px double #0e99b2;
    border-bottom-color: transparent;
    border-radius: 50%;
    -webkit-transform: rotateX(120deg) rotate(-30deg);
    -webkit-animation: ringdance .5s infinite alternate linear;
    }

    #div06:after {
    z-index: -1;
    border-bottom-color: #0e99b2;
    }

    @-webkit-keyframes ringdance {
    from {-webkit-transform: rotateX(120deg) rotate(-30deg);}
    to {-webkit-transform: rotateX(120deg);}
    }

« Back