fa-spin逆时针反向旋转及速度调整的方法

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)。

 

点赞