よくつかうかもしれないCSSアニメーション

ゆっくり点滅２回

.hoge-blink{
    animation: anime1 2s ease -2s 3;
    -webkit-animation:anime1 2s ease -2s 3;
}
@keyframes anime1 {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes anime1 {
    0% {opacity:0;}
    100% {opacity:1;}
}

要素を真ん中に表示

参考：http://hail2u.net/pub/test/631-2.html

.hoge-box {
    bottom: 50%;
    display: inline;
    position: absolute;
    right: 50%;
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    vertical-align: top;
}

ローディングくるくるずっと

.hoge-img {
    display: block;
    -webkit-animation: spin 0.5s linear infinite;
    animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}