wiggle

HTML

<div class="test">Test</div>

CSS

@-webkit-keyframes wiggle
{
    2%,6%{
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
    4%,8%{
        -webkit-transform:rotate(-2deg);
        transform: rotate(-2deg)
    }
    10%,14%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

}
@-moz-keyframes wiggle
{
    2%,6%{
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
    4%,8%{
        -webkit-transform:rotate(-2deg);
        transform: rotate(-2deg)
    }
    10%,14%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

}
@-o-keyframes wiggle
{
    2%,6%{
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
    4%,8%{
        -webkit-transform:rotate(-2deg);
        transform: rotate(-2deg)
    }
    10%,14%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

}
@keyframes wiggle
{
    2%,6%{
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
    4%,8%{
        -webkit-transform:rotate(-2deg);
        transform: rotate(-2deg)
    }
    10%,14%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }


  
}
 
.test {
    background-color: red;
    width: 300px;
        height: 300px;
           animation-duration:10s;
    -webkit-animation: wiggle 0.2s ease infinite;
    -moz-animation: wiggle 0.2s ease infinite;
    -o-animation: wiggle 0.2s ease infinite;
    animation: wiggle 10s ease infinite;
}