beccatapert Posted January 12 Posted January 12 Hello, On the homepage of https://www.kgbeauty.co/ I entered some code to spin an image continually. It works on the backend, but when I view the site live, it is not spinning. I am referencing the circle of text that says "SEATTLE MAKEUP ARTIST". The code I am currently using in the Custom CSS is... #block-yui_3_17_2_1_1705023988848_42937{ position: relative !important; animation: rotate 30s linear infinite !important; } Thank you
tuanphan Posted January 14 Posted January 14 I scroll over all images but can't see that spin. Can you check it again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
beccatapert Posted January 14 Author Posted January 14 @tuanphan I need help making it spin. I don't want it as a hover state, I want it always spinning. I need help coding it to spin.
Solution yubrajs Posted January 14 Solution Posted January 14 You can achieve this with keyframe animation. .fe-block-yui_3_17_2_1_1705023988848_42937{ animation: spin 5s normal linear infinite; } @keyframes spin { 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 25% { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 50% { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); } 75% { -webkit-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment