Reversing CSS Rotation Smoothly on Hover

Developer
Zach Saucier
Size
2,045 Kb
Views
40,480
  1. Reversing CSS Rotation Smoothly on Hover Previews
  2. Reversing CSS Rotation Smoothly on Hover HTML Codes
  3. Reversing CSS Rotation Smoothly on Hover CSS Codes

How do I make an reversing css rotation smoothly on hover?

In order to accomplish this goal a container element is required. The trick is to have the same rotation animations apply to both the container and the content, but have them go in opposite directions and have one twice as quick as the other. Thus you pause the quicker one and unpause it on hover. NOTE: In Chrome there is currently a small glitch when transitioning after the first transition. What is a reversing css rotation smoothly on hover? How do you make a reversing css rotation smoothly on hover? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

Reversing CSS Rotation Smoothly on Hover Previews
IQ Test

Reversing CSS Rotation Smoothly on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reversing CSS Rotation Smoothly on Hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- NOTE: In Chrome there is a brief glitch during the transition after the first one -->
<div class='spiralContainer'><div class='spiral'></div></div>
</body>
</html>

Reversing CSS Rotation Smoothly on Hover - Script Codes CSS Codes

.spiralContainer { border-radius: 50%; width:200px; height:200px; overflow:hidden; margin:20px; -webkit-animation: spin 3s linear 0s infinite reverse; -moz-animation: spin 3s linear 0s infinite reverse; -ms-animation: spin 3s linear 0s infinite reverse; -o-animation: spin 3s linear 0s infinite reverse; animation: spin 3s linear 0s infinite reverse; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
.spiral { width:200px; height:200px; border-radius: 50%; background-image: url(http://farm7.staticflickr.com/6115/6319704650_0a2bd0dcef_o.jpg); background-repeat:no-repeat; background-position:50% 50%; -webkit-animation: spin 6s linear 0s infinite normal; -moz-animation: spin 6s linear 0s infinite normal; -ms-animation: spin 6s linear 0s infinite normal; -o-animation: spin 6s linear 0s infinite normal; animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover { -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running;
}
@keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin { 0% {-webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin { 0% {-ms-transform: rotate(360deg); } 100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin { 0% { -moz-transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin { 0% { -o-transform: rotate(360deg); } 100% { -o-transform: rotate(0deg); }
}
Reversing CSS Rotation Smoothly on Hover - Script Codes
Reversing CSS Rotation Smoothly on Hover - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 3.5
Size 2,045 Kb
Views 40,480
Do you need developer help for Reversing CSS Rotation Smoothly on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zach Saucier (Zeaklous) Script Codes
Name
Yin-Yang CSS Image Animation
Prism music visualizer
SVG clip path with blend mode
CSS Callback Functions Using Iteration
Asset loading effects demo
Circle Snake
Personal site header 2017
Building Images
Change transformation-origin mid animation
Changing a CSS Animation at its Current Values
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!