多说自定义CSS 让你的多说评论动感起来

话不多说，正文开始。

代码在下面(请用非IE浏览器看)，将代码粘贴到多说评论-个性化设置-自定义CSS 里，刷新即可看到效果。

ps：代码都是共通的，不局限于多说，应用在别的效果上也是可以的。
预览效果请下拉至底部,鼠标移至留言头像上即可~

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{      
    -webkit-animation-fill-mode: both;      
    -moz-animation-fill-mode: both;      
    -ms-animation-fill-mode: both;      
    -o-animation-fill-mode: both;      
    animation-fill-mode: both;      
    -webkit-animation-duration: 0s;      
    -moz-animation-duration: 0s;      
    -ms-animation-duration: 0s;      
    -o-animation-duration: 0s;      
    animation-duration: 0s;      
    -webkit-animation-duration: 0.7s;      
    -moz-animation-duration: 0.7s;      
    -ms-animation-duration: 0.7s;      
    -o-animation-duration: 0.7s;      
    animation-duration: 0.7s;      
}      
     
@-webkit-keyframes rotateIn {      
    0% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@-moz-keyframes rotateIn {      
    0% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@-o-keyframes rotateIn {      
    0% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@keyframes rotateIn {      
    0% {      
        transform-origin: center center;      
        transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        transform-origin: center center;      
        transform: rotate(0);      
        opacity: 1;      
    }      
}      
     
#ds-reset .ds-avatar img{      
    -webkit-animation-name: rotateIn;      
    -moz-animation-name: rotateIn;      
    -o-animation-name: rotateIn;      
    animation-name: rotateIn;      
}      
@-webkit-keyframes rotateOut {      
    0% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@-moz-keyframes rotateOut {      
    0% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@-o-keyframes rotateOut {      
    0% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@keyframes rotateOut {      
    0% {      
        transform-origin: center center;      
        transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        transform-origin: center center;      
        transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
#ds-reset .ds-avatar img:hover{      
    -webkit-animation-name: rotateOut;      
    -moz-animation-name: rotateOut;      
    -o-animation-name: rotateOut;      
    animation-name: rotateOut;      
}