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