beccatapert Posted January 12 Share 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 Link to comment
tuanphan Posted January 14 Share 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!) Link to comment
beccatapert Posted January 14 Author Share 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. Link to comment
Solution yubrajs Posted January 14 Solution Share 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 Link to comment
beccatapert Posted January 14 Author Share Posted January 14 @yubrajs thank you! that worked! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment