Ajax Loader
×
HTML
<span class="r180" aria-hidden="true">&times;</span>
1
<span class="r180" aria-hidden="true">&times;</span>
 
CSS
.r180{
1
.r180{
2
    font-size: 80px;
3
    font-weight: 900;
4
    color: #666;
5
    position: relative;
6
    cursor: pointer;
7
}
8
.r180:hover{
9
    -webkit-animation-name: rotate; 
10
    -webkit-animation-duration: 0.8s; 
11
    -webkit-animation-iteration-count: 1;
12
    -webkit-animation-timing-function: ease-in-out;
13
    -moz-animation-name: rotate; 
14
    -moz-animation-duration: 0.8s; 
15
    -moz-animation-iteration-count: 1;
16
    -moz-animation-timing-function: ease-in-out;
17
    animation-name: rotate; 
18
    animation-duration:0.8s; 
19
    animation-iteration-count: 1;
20
    animation-timing-function: ease-in-out;
21
}
22
 
23
@keyframes rotate {
24
    from {transform: rotate(0deg);} 
25
    to {transform: rotate(180deg);}
26
}
 

animated x-close button rotate 180deg

CSSDeck G+