animated x-close button rotate 180deg

<span class="r180" aria-hidden="true">&times;</span>

.r180{

    font-size: 80px;

    font-weight: 900;

    color: #666;

    position: relative;

    cursor: pointer;

}

.r180:hover{

    -webkit-animation-name: rotate; 

    -webkit-animation-duration: 0.8s; 

    -webkit-animation-iteration-count: 1;

    -webkit-animation-timing-function: ease-in-out;

    -moz-animation-name: rotate; 

    -moz-animation-duration: 0.8s; 

    -moz-animation-iteration-count: 1;

    -moz-animation-timing-function: ease-in-out;

    animation-name: rotate; 

    animation-duration:0.8s; 

    animation-iteration-count: 1;

    animation-timing-function: ease-in-out;

}

@keyframes rotate {

    from {transform: rotate(0deg);} 

    to {transform: rotate(180deg);}

}