Changing the border colour of 4 circles one after the other?

Changing the border colour of 4 circles one after the other? - javascript

I have 4 rings of circles that are white and I want one of them to change blue for 1 second, the next one for one second, and so on, totalling 4 seconds. I was thinking of trying this with just CSS animations but I think I'll need JavaScript.. any ideas on how to achieve this? Thanks!
Example: http://imgur.com/a/h0Wy0
HTML:
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>
CSS:
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
Here is the JSFiddle: https://jsfiddle.net/ydb48372/3/

You can do this with just css animations. First create animation of 4s duration that sets border-color to blue for 1s or 25% of time of those 4 seconds and the rest of animation returns border-color to gray or 75% of full animation time. Now you just need to use animation-delay on each circle so that animation on one circle starts after 1s when color from previous circle has changed to gray.
.circles {
position: relative;
min-height: 100vh;
}
.circle {
border-radius: 50%;
border: 10px solid gray;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 4s;
animation-name: changeColor;
animation-iteration-count: infinite;
}
.c1 {
height: 300px;
width: 300px;
}
.c2 {
height: 250px;
width: 250px;
animation-delay: 1s;
}
.c3 {
height: 200px;
width: 200px;
animation-delay: 2s;
}
.c4 {
height: 150px;
width: 150px;
animation-delay: 3s;
}
#keyframes changeColor {
0% {
border-color: #1C50A8;
}
24% {
border-color: #1C50A8;
}
25% {
border-color: gray;
}
100% {
border-color: gray;
}
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>

You can use css3 key frames to achieve what you are looking for. You might have to play with the numbers to get the exact timings you want but it should be achievable.
div {
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {border-color: white;}
100% {border-color: blue;}
}
/* Standard syntax */
#keyframes mymove {
0% {border-color: white;}
100% {border-color: blue;}
}

Using animation-delay like a commentator mentions is correct.
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
.c1, .c2, .c3, .c4 {
animation: 400ms change-border-color forwards;
}
.c2 {
animation-delay: 450ms;
}
.c3 {
animation-delay: 900ms;
}
.c4 {
animation-delay: 1350ms;
}
#keyframes change-border-color {
from { border-color: white; }
to { border-color: blue; }
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>

Refer animation and animation-delay property in css
animation: animate 1s;
animation-delay: 1s;
Fiddle

Here's a solution using a pseudoelement on .circles
I've used keyframes to change the height, width and position.
fiddle
body {
background: grey;
}
.circles {
position: relative;
}
.circles::after {
position: absolute;
content: "";
width: 300px;
height: 300px;
top: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid blue;
border-radius: 50%;
-webkit-animation: blue 5s infinite;
-moz-animation: blue 5s infinite;
-o-animation: blue 5s infinite;
animation: blue 5s infinite;
}
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
#keyframes blue {
25% {
width: 300px;
height: 300px;
top: 0px;
}
25.001% {
width: 250px;
height: 250px;
top: 25px;
}
50% {
width: 250px;
height: 250px;
top: 25px;
}
50.001% {
width: 200px;
height: 200px;
top: 50px;
}
75% {
width: 200px;
height: 200px;
top: 50px;
}
75.001% {
width: 150px;
height: 150px;
top: 75px;
}
100% {
width: 150px;
height: 150px;
top: 75px;
}
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>

Related

Inserting pictures into circles using JavaScript, HTML and CSS

From this question ("Rotate objects around circle using CSS?"), I copied the following code, but is it possible to insert pictures into the code? I would like to insert pictures into the circles so that one picture orbits another. For example, Earth orbiting the sun.
Earth: https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand
Sun: https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg
How do I modify the code in such a way as to make the earth orbit the sun instead of the blank circles?
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
This is the output when I add the images:
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
background-image: url("https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg");
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
background-image: url("https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand");
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>

i just add background-image css to both element. And linking the earth and moon picture from Wikipedia to that element.
body{
background:#000;
}
.earth, .moon{
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.earth {
background-color: blue;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/9/90/Small_Earth.jpg" );
position: absolute;
width: 200px;
height: 200px;
box-shadow:0 0 20px dodgerblue;
margin:50px;
}
.moon {
position: relative;
background-color: white;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg" );
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
<div class="earth">
<div class="rotate">
<div class="counterrotate">
<div class="moon"></div>
</div>
</div>
</div>

You could try adding each image as a background-image right in the CSS rules that define their size/shape.

Add a background image to your elements. Open your inspector and click on the element and it will highlight the elements border-box, identify which element is what and then in your CSS, add a background:url(link to the image) to the selector/element you wish to have an image on.
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
background: url(https://cdn.pixabay.com/photo/2017/05/12/22/48/mouse-2308339__180.jpg) no-repeat;
border-radius: 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
display: block;
background: center url(https://as1.ftcdn.net/jpg/00/31/01/02/220_F_31010244_P6FGF9nfBY1oaGFndhdHhUUIfjHqMoib.jpg) no-repeat white;
background-size: 90%;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>

Ball page loader animation

I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>

I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output

Preloader covering page with an invisible layer

I have created a preloader which works fine apart from when it is gone it is still there as a invisible layer covering all the content on the page. So none of the content like links can be clicked. How can this be solved but still keep the animation?
Codepen
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
</div>
<div class="section" id="left_sect">
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #666666;
width: 100%;
}
#preloader_wrap{
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section{
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect{
left: 0;
}
#right_sect{
right: 0;
}
#content{
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar{
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div{
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
body.loaded .section{
width: 0;
}
body.loaded #content{
opacity: 0;
}
header{
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul{
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li{
display: inline-block;
font-size: 40px;
}
ul li a{
color: white;
}
JS:
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 2000);
});

Change your script to this...
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('#preloader_wrap').remove();
}, 2000);
});
That will completely remove the layer once the page is loaded.

Its basically a z-index problem on preloader_wrap. You can fix the z-index after the loader is loaded with $("#preloader_wrap").css("z-index","-1")
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
$("#preloader_wrap").css("z-index", "-1");
}, 2000);
});
* {
margin: 0;
padding: 0;
}
body {
background-color: #666666;
width: 100%;
}
#preloader_wrap {
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section {
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect {
left: 0;
}
#right_sect {
right: 0;
}
#content {
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img {
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar {
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div {
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body.loaded .section {
width: 0;
}
body.loaded #content {
opacity: 0;
}
header {
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul {
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li {
display: inline-block;
font-size: 40px;
}
ul li a {
color: white;
}
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
sdsadsadsa
</div>
<div class="section" id="left_sect">
dasdsadsad
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Your loader area has a z-index of 1010, which puts it in front of everything else, and you aren't removing that, or removing the element itself. And because its width and height are 100% it blocks the whole page.
You can fix this just using CSS. You're already doing this:
body.loaded .section{
width:0;
}
body.loaded #content{
opacity: 0;
}
However, this only hides the inner parts of the loader, not the whole thing. Do this instead:
body.loaded #preloader_wrap {
display:none;
}
See working example: https://codepen.io/anon/pen/ZKbJEj

I'm not overly clear on which parts of your markup you are trying to hide, but assuming it's all of the stuff within the preloader_wrap element (and if not I would move that markup outside of it), the issue you are having is that this element is stacked on top of the other elements due to it's z-index being higher.
The easiest fix for this is to add the following CSS:
body.loaded #preloader_wrap {
display: none;
}
I can see that this breaks your animation, you could consider the following instead:
body.loaded #content{
opacity: 0;
display: none;
}
However this feels like a bit of a hack given we wouldn't be hiding the wrapper here therefore if anything else in it gave it height it would still overlay part of the page.
I would consider refactoring your markup/CSS transition to make this work for you in a more consistent way.

Spin a div but make its content not go upside down

Is there a way to make a div spin, aswell as its content, but make the content not go upside-down while rotating ?
What I mean is that the div-childs would follow the rotation of the mother-div spinning, but while remaining in the same direction (top on top, bottom on bottom).
My english isn't goog enough to articulate properly what I want to do, so here is an exemple :
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
In the exemple above, the child divs are following the rotation and the spin.
I would like them not to "spin upside-down" and just follow the rotation.
I've seen these type of animation in several websites but I can't recall where exactly.
Is there a way to do this in css/js/jquery/php... ?

You can apply the same animation to the four children, but in reverse. That way, the rotation of the children counteract the rotation of the parent and the children remain upright.
For clarity, I've used animation-direction to reverse the animation:
animation-direction: reverse;
But you could include the direction in your animation shorthand, like:
animation: spin 10s reverse infinite linear;
Here's an example:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
animation: spin 10s infinite linear;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
}
#div2 {
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>

Following #showdev answer, if you want the borders around the inner divs to follow the spin of the outer block and only make the text inside to stay "fixed" in position - you can use a bit of jQuery for that:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
I also added a bit of css, you can check inside the snippet:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
text-align: center;
line-height: 50px;
}
.spin div span {
animation: spin 10s infinite linear;
animation-direction:reverse;
display: inline-block;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover, .spin:hover span {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>

I understood you also wanted each of 4 elements to stay in the area of their corners. This might need some extra animation to have them run around the parent edges.
Below the idea of what i understood:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
position: relative;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
}
#div1 {
border: 1px solid blue;
animation: spin1 10s infinite linear;
position: absolute;
top: 0;
left: 0;
}
#div2 {
animation: spin2 10s infinite linear;
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
animation: spin3 10s infinite linear;
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
animation: spin4 10s infinite linear;
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused!important;/* or used id and several selectors to avoid the important and overide div#div1 {...}*/
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
25% {
top: 150px;
left: 0
}
50% {
left: 150px;
top: 150px
}
75% {
left: 150px;
top: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin2 {
0% {
transform: rotate(0deg);
}
25% {
top: 0;
right: 150px
}
50% {
right: 150px;
top: 150px
}
75% {
top: 150px;
right: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin3 {
0% {
transform: rotate(0deg);
}
25% {
bottom: 0;
left: 150px
}
50% {
left: 150px;
bottom: 150px
}
75% {
bottom: 150px;
left: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin4 {
0% {
transform: rotate(0deg);
}
25% {
right: 0;
bottom: 150px
}
50% {
right: 150px;
bottom: 150px
}
75% {
right: 150px;
bottom: 0;
}
100% {
transform: rotate(-359deg);
}
}
<div class="spin">
<div id="div1">top left</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
<div id="div4">bottom right</div>
</div>

Add this rule to each numbered div:
counterspin 10s infinite linear;
and then this keyframes animation
#keyframes counterspin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}

.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
you may try this
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

CSS3 or Javascript - Simple Fill Animation

I'm trying create a simple animation that when a user hovers over an element, another element contained within it fills its parent. Currently, I have a JSFiddle that does just that.
BUT, I want to finish this with a few other features that I'm not sure I can actually do in CSS3.
I'm trying to find a way to, upon having the inner circle COMPLETELY fill its parent, (ie when its width/height = 300px), I'd like the fill to pause and not disappear after the animation is complete.
When a user moves their mouse outside the :hover range, I would like the animation to reverse direction as opposed to abruptly stopping.
I've gotten this far with CSS3 but am not sure I can implement these 2 features without resorting to Javascript. Does anyone know of a way of doing this entirely in CSS3/does anyone know if it is possible to do these last two features in CSS3, because I can't seem to find anything.
.circle {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
overflow: hidden;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
.filler {
width: 0px;
height: 0px;
background-color: red;
border: none;
position: relative;
left: 50%;
top: 50%;
border-radius: 150px;
-mox-border-radius: 150px;
-webkit-border-radius: 150px;
animation: empty 1s;
}
.circle:hover .filler {
animation: fill 2s;
-moz-animation: fill 2s;
-webkit-animation: fill 2s;
background-color: blue;
}
#keyframes fill
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-moz-keyframes fill /* Firefox */
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-webkit-keyframes fill /* Safari and Chrome */
{
from {background: red; height:0px; width:0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-moz-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-webkit-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
JS Fiddle

You don't need keyframes for this simple animation. Here is CSS you need:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
and HTML:
<div class="circle">
<div class="filter"></div>
</div>
Here is an example: http://jsbin.com/agekef/1/edit

I hope you can try out for this link might help you out
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
Thanks

Develop Reference

JavaScript is the programming language of the Web.

Changing the border colour of 4 circles one after the other? - javascript

Refer animation and animation-delay property in css animation: animate 1s; animation-delay: 1s; Fiddle

Related

Inserting pictures into circles using JavaScript, HTML and CSS

Ball page loader animation

Preloader covering page with an invisible layer

Spin a div but make its content not go upside down

CSS3 or Javascript - Simple Fill Animation

Categories

Resources