多说的评论头像特效大全css打造最强评论特效

#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: 1s;   
    -moz-animation-duration: 1s;   
    -ms-animation-duration: 1s;   
    -o-animation-duration: 1s;   
    animation-duration: 1s;   
}   

@-webkit-keyframes rotateInDownLeft {   
    0% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(-90deg);   
        opacity: 0;   
    }   

    100% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   
}   

@-moz-keyframes rotateInDownLeft {   
    0% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(-90deg);   
        opacity: 0;   
    }   

    100% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   
}   

@-o-keyframes rotateInDownLeft {   
    0% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(-90deg);   
        opacity: 0;   
    }   

    100% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   
}   

@keyframes rotateInDownLeft {   
    0% {   
        transform-origin: left bottom;   
        transform: rotate(-90deg);   
        opacity: 0;   
    }   

    100% {   
        transform-origin: left bottom;   
        transform: rotate(0);   
        opacity: 1;   
    }   
}   

#ds-reset .ds-avatar img{   
    -webkit-animation-name: rotateInDownLeft;   
    -moz-animation-name: rotateInDownLeft;   
    -o-animation-name: rotateInDownLeft;   
    animation-name: rotateInDownLeft;   
}   

#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: rotateOutDownLeft;   
    -moz-animation-name: rotateOutDownLeft;   
    -o-animation-name: rotateOutDownLeft;   
    animation-name: rotateOutDownLeft;   
}   
@-webkit-keyframes rotateOutDownLeft {   
    0% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   

    100% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   

@-moz-keyframes rotateOutDownLeft {   
    0% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   

    100% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   

@-o-keyframes rotateOutDownLeft {   
    0% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   

    100% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   

@keyframes rotateOutDownLeft {   
    0% {   
        transform-origin: left bottom;   
        transform: rotate(0);   
        opacity: 1;   
    }   

    100% {   
        transform-origin: left bottom;   
        transform: rotate(90deg);   
        opacity: 0;   
    }   
}