Проверка особенности отрисовки вращающихся объектов в ФФ

by SerGen

HTML

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>
<div class="spinner spinner--hover-square"></div>
<div class="spinner spinner--animated spinner--easy"></div>
<div class="spinner spinner--animated spinner--true"></div>

CSS

.spinner {
    display: block;
    margin: 2em;
}
.spinner--animated {
    animation: spinner 3s linear infinite;
}
.spinner--hover-square {
    height: 4em;
    width: 4em;
    
    border: 2px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    
    animation: skewer 3s linear infinite;
}
.spinner--easy {
    height: 4em;
    width: 4em;
    
    border: 2px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}
.spinner--true {
    position: relative;
    height: 4em;
    width: 2em;
    left: 2em;
    overflow: hidden;
    
    transform-origin: 0 50%;
}
.spinner--true:after {
    content: '';
    
    position: absolute;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    
    border: 2px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    
    transform: rotate(45deg);
}

@keyframes scaler {
	from {transform: scale(1);}
	50% {transform: scale(1.5);}
	to {transform: scale(1);}
}
@keyframes skewer {
	from {transform: skew(0);}
	50% {transform: skew(30deg);}
	to {transform: skew(0);}
}
@keyframes spinner {
	from {transform: rotate(0);}
	to {transform: rotate(1turn);}
}