Test animation rotate concentric

Developer
Ex HTML
Size
2,799 Kb
Views
4,048
  1. Test animation rotate concentric Previews
  2. Test animation rotate concentric HTML Codes
  3. Test animation rotate concentric CSS Codes

How do I make an test animation rotate concentric?

What is a test animation rotate concentric? How do you make a test animation rotate concentric? This script and codes were developed by Ex HTML on 11 January 2023, Wednesday.

Test animation rotate concentric Previews
IQ Test

Test animation rotate concentric - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Test animation rotate concentric</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="circle-center"></div> <div class="circle-satellite cs1"></div> <div class="circle-satellite cs2"></div>
</div>
</body>
</html>

Test animation rotate concentric - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
.wrapper { position: relative; background-color: #eee; width: 60%; padding-top: 60%; border-radius: 50%; margin: 0 auto;
}
.wrapper:hover > .circle-satellite { -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation: 1s bounce-on-stop once; animation: 1s bounce-on-stop once;
}
.circle-center { border-radius: 50%; width: 100px; height: 100px; background-color: cyan; -webkit-transform-origin: 50%; transform-origin: 50%; position: absolute; z-index: 0; top: 50%; left: 50%; -webkit-transform: translate(-50px, -50px); transform: translate(-50px, -50px);
}
.circle-satellite { border-radius: 50%; width: 50px; height: 50px; background-color: cyan; -webkit-transform-origin: 50%; transform-origin: 50%; position: absolute;
}
.circle-satellite:after { content: ""; visibility: hidden; -webkit-transform: scale(0, 0); transform: scale(0, 0); position: absolute; top: -75px; left: -75px; border-radius: 50%; width: 200px; height: 200px; background-color: rgba(255, 255, 0, 0.5); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.circle-satellite:hover::after { visibility: visible; -webkit-transform: scale(1, 1); transform: scale(1, 1);
}
.cs1 { top: 62%; left: 62%; z-index: 5; background-color: pink; -webkit-transform-origin: -100% -100%; transform-origin: -100% -100%; -webkit-animation: 4s satellite-rotate-ccw infinite linear; animation: 4s satellite-rotate-ccw infinite linear; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
.cs2 { top: 74%; left: 74%; z-index: 2; background-color: orange; -webkit-transform-origin: -200% -200%; transform-origin: -200% -200%; -webkit-animation: 6s satellite-rotate-cw infinite linear; animation: 6s satellite-rotate-cw infinite linear; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes satellite-rotate-ccw { 100% { -webkit-transform: rotate(-1turn); transform: rotate(-1turn); }
}
@keyframes satellite-rotate-ccw { 100% { -webkit-transform: rotate(-1turn); transform: rotate(-1turn); }
}
@-webkit-keyframes satellite-rotate-cw { 100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}
@keyframes satellite-rotate-cw { 100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}
@-webkit-keyframes bounce-on-stop { 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 70% { -webkit-transform: translateY(20px); transform: translateY(20px); } 80% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce-on-stop { 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 70% { -webkit-transform: translateY(20px); transform: translateY(20px); } 80% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
Test animation rotate concentric - Script Codes
Test animation rotate concentric - Script Codes
Home Page Home
Developer Ex HTML
Username exhtml
Uploaded January 11, 2023
Rating 3
Size 2,799 Kb
Views 4,048
Do you need developer help for Test animation rotate concentric?

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!

Ex HTML (exhtml) Script Codes
Name
Cursor mouse test
Slides-08-1 TEXTOS
Parallax tests
Smooth Scroll
A Pen by Ex HTML
Cheatsheet
Pure css tabs
CSS Filters 2
Slides-09-2 MENU
Typography test 2
Create amazing SEO content 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!