fa-spin原为顺时针旋转,一圈2秒。本文介绍如何反向旋转和速度的调整。
注意:请注意兼容性的问题,比如是否要加-webkit-animation,不在本文讨论范围内。
fa-span默认样式为:
.fa-spin {
animation: fa-spin 2s infinite linear;
}
fa-spin速度调整
.logo .fa-spin {
animation: fa-spin 10s infinite linear;
}
将局部样式的fa-spin中2s修改即可,如上例中修改为10s。
fa-spin反向旋转
.logo .fa-spin-reverse {
animation: spin-reverse 2s infinite linear;
}
@keyframes spin-reverse {
0% {
transform: scaleX(-1) rotate(360deg);
}
100% {
transform: scaleX(-1) rotate(0deg);
}
}
添加一个名为fa-spin-reverse的样式,如以上代码。其中最关键的是rotate(360deg)。