Develop Reference

Loop a sequence of css animation

I have the following code:
#keyframes ball1 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(120px);
opacity: 0%;
}
}
#keyframes ball2 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(160px);
opacity: 0%;
}
}
#keyframes ball3 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(200px);
opacity: 0%;
}
}
#keyframes ball4 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(240px);
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation-duration: 1s;
animation-iteration-count: 1;
}
#ball-1 {
animation-name: ball1;
}
#ball-2 {
animation-name: ball2;
animation-delay: 1s;
}
#ball-3 {
animation-name: ball3;
animation-delay: 2s;
}
#ball-4 {
animation-name: ball4;
animation-delay: 3s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
I want to achieve to follow:
Sequence starts
Ball 1 animates once.
There is a delay of 1 second.
Ball 2 animates once.
There is a delay of 1 second.
Ball 3 animates once.
There is a delay of 1 second.
Ball 4 animates once.
There is a delay of 1 second.
The sequence restarts from step 1.
This is what I currently have, but I don't know how to loop this sequence, it only plays ones. Not sure if it's possible with only css. If not I'm fine with JS as well.
Example: https://jsfiddle.net/patxh1gn/

do you mean something like this?
#keyframes ball1 {
0%,
12.501% {
transform: translateX(0px);
opacity: 0%;
}
6.25%,
12.502%,
100% {
opacity: 100%;
}
12.5% {
transform: translateX(var(--right));
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation: ball1 8s infinite;
}
#ball-1 {
--right: 120px;
}
#ball-2 {
--right: 160px;
animation-delay: 2s;
}
#ball-3 {
--right: 200px;
animation-delay: 4s;
}
#ball-4 {
--right: 240px;
animation-delay: 6s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>

Spining icon not rotating in the iOS version 15.3 + but working fine in lower 15.3 version

spining icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. please help me for fixing this issue.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>

keyframes creating issue when using with jQuery

I am trying to create bubble and also bubble burst on click.I am using two keyframes, One for bubbling, and other is when click on bubble.
Problem is when I click on bubble the effect is showing on wrong areas. Here is my code sample. i can't understand where is the issue is
because of two keyframes timing is wrong. how to adjust click effect where the bubble is exactly click.
$('.bubbles li').on('click',mouseremove, function () {
const thisBubble = $(this);
thisBubble.addClass('bubble-pop');
setTimeout(() => {
thisBubble.hide();
mouseremove(thisBubble);
}, 500);
});
function mouseremove(thisBubble) {
thisBubble.removeClass('bubble-pop');
setTimeout(() => {
thisBubble.show();
}, 500);
}
.bubbles {
padding:0;
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bubbles li {
position: absolute;
list-style: none;
display: block;
background-image: url('https://www.fundacioarcadi.com/wp-content/uploads/2019/09/bombolla-01.png');
background-size: 20px;
bottom: -100px;
-webkit-animation: square 40s infinite ;
animation: square 40s infinite ;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
li{
background-image: url("https://www.fundacioarcadi.com/wp-content/uploads/2019/09/bombolla-01.png");
background-size: cover !important;
}
.bubbles li:nth-child(1) {
width: 250px;
height: 250px;
left: 10%;
}
.bubbles li:nth-child(2) {
width: 200px;
height: 200px;
left: 40%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.bubbles li:nth-child(3) {
width: 100px;
height: 100px;
left: 60%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.bubbles li:nth-child(4) {
width: 160px;
height: 160px;
left: 80%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 45s;
animation-duration: 45s;
}
.bubbles li:nth-child(5) {
width: 100px;
height: 100px;
left: 50%;
-webkit-animation-delay: 20s;
animation-delay: 15s;
-webkit-animation-duration: 35s;
animation-duration: 35s;
}
.bubbles li:nth-child(6) {
width: 100px;
height: 100px;
left: 10%;
-webkit-animation-delay: 20s;
animation-delay: 15s;
-webkit-animation-duration: 65s;
animation-duration: 65s;
}
.bubbles li:nth-child(7) {
width: 100px;
height: 100px;
left: 90%;
-webkit-animation-delay: 20s;
animation-delay: 45s;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1080px);
transform: translateY(-1080px);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1080px) rotate(180deg);
transform: translateY(-1080px) rotate(180deg);
}
}
.bubble-pop {
-webkit-animation: bubblePop 0.4s ease !important;
-moz-animation: bubblePop 0.4s ease !important;
animation: bubblePop 0.4s ease !important;
opacity: 0 !important;
}
#-webkit-keyframes bubblePop {
0% {
-webkit-transform: scale(0.2);
opacity: 1;
}
20% {
-webkit-transform: scale(0);
opacity: 0.6;
}
100% {
-webkit-transform: scale(0.2);
opacity: 0;
}
}
#-moz-keyframes bubblePop {
0% {
-moz-transform: scale(0.2);
opacity: 1;
}
20% {
-moz-transform: scale(0);
opacity: 0.6;
}
100% {
-moz-transform: scale(0.2);
opacity: 0;
}
}
#keyframes bubblePop {
0% {
transform: scale(0.2);
opacity: 1;
}
20% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Looking to achieve rectangle radial wipe animation reveal

I'm working on a full-width hero animation that would reveal an image/HTML div in a radial wipe manner. Here's what I have thus far: http://jsfiddle.net/andrewkerr/bjqSv/ - (code below) which is largely based these pieces:http://codepen.io/tmyg/pen/bwLom and http://css-tricks.com/css-pie-timer/ - The issue I'm running into is the fact that the image tiles because the animation splits the "pie" in half - I'm looking to perform the effect without having the image tile. I'm not opposed to a Javascript solution. Thanks.
//html
<div class="spinner-new">
<span><em></em></span>
<span><em></em></span>
</div>
//css
.spinner-new {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
background:#3f9e35;
overflow:hidden
}
.spinner-new span em {
background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg');
-webkit-animation-delay:1s;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner-new {
position: relative;
}
.spinner-new span {
width: 50%;
height: 400%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
left: 0;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spinner-new span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 12.5%;
}
.spinner-new span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 12.5%;
}

That is my solution.
CSS
#-webkit-keyframes span-left {
0% { right: 0%; }
24.999% { right: 0%;}
25% { right: 50%;}
100% { right: 50%;}
}
#-webkit-keyframes rotate-first {
0% { right: 100%;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: right center; }
24.999% { right: 100%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
25% { right: 0%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
50% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
100% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
}
#-webkit-keyframes rotate-last {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
24.999% { -webkit-transform: rotate(180deg); opacity: 0;}
25% { -webkit-transform: rotate(180deg); opacity: 1;}
50% { -webkit-transform: rotate(360deg); opacity: 1; }
100% { -webkit-transform: rotate(360deg); opacity: 1;}
}
.spinner-new {
width: 400px;
height: 300px;
position: relative;
overflow:hidden;
position: relative;
left: 50px;
top: 20px;
}
.spinner-new span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
right: 50%;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
}
.spinner-new span em,
.spinner-new span:first-child {
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner-new span:first-child {
-webkit-animation-name: span-left;
}
.spinner-new span:first-child em {
-webkit-animation-name: rotate-first;
overflow: hidden;
}
.spinner-new span:last-child em {
left: 0;
-webkit-animation-name: rotate-last;
-webkit-transform-origin: left center;
-webkit-transform: rotate(204deg);
}
.spinner-new span em:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0px;
background-image:url('image.jpg');
background-size: cover;
}
.spinner-new span:first-child em:after {
left: 0px;
}
.spinner-new span:last-child em:after {
right: 0px;
}
The most complex issue is reusing the splitted left element for the right hand beginning.
I have to move the container to the left in the middle of the animation.
The background image is set with cover, and all the size are in percentages, so this solution should be fully responsive
fiddle
The demo has the iteration count to infinite, so it is easier to see it going on.

May not be the most elegant way to accomplish this, but I ended up using CSS animations to reveal pie pieces gradually. Here's a link to the working example: http://jsfiddle.net/andrewkerr/dsTm6/ - code below
//html
<div class="wrapper">
<div class="headline">Some really cool supporting text</div>
<div class='shutter-1 first' style="left:400px;top:0px;"></div>
<div class='shutter-2 fourth' style="left:400px;top:400px;"></div>
<div class='shutter-1a third' style="left:400px;top:400px;"></div>
<div class='shutter-3 seventh' style="left:0px;top:0px"></div>
<div class='shutter second' style="left:400px;top:0px;"></div>
<div class='shutter-2a sixth' style="left:0px;top:400px;"></div>
<div class='shutter fifth' style="left:0px;top:400px;"></div>
<div class='shutter-3a eighth' style="left:0px;top:0px"></div>
</div>
//css
.wrapper {
position:relative;
background-image:url('main.jpg');
width:800px;
height:800px;
margin:0px auto;
}
.shutter
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-top;150px solid transparent;
border-left: 400px solid #e7e7e7;
text-indent: -9999px;
border-top-width: 400px;
border-top-style: solid;
border-top-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
#keyframes first
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-moz-keyframes first /* Firefox */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-webkit-keyframes first /* Safari and Chrome */
{
from {opacity: 1.0 ;}
to {opacity: 0.0;}
}
#-o-keyframes first /* Opera */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.first
{
animation: first 1s;
animation-delay: .08s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: .08s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .08s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: .08s;
-o-animation-fill-mode: forwards;
}
.second
{
animation: first 1s;
animation-delay: 1.0s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards;
}
.third
{
animation: first 1s;
animation-delay: 1.05s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.05s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.05s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.05s;
-o-animation-fill-mode: forwards;
}
.fourth
{
animation: first 1s;
animation-delay: 1.2s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.2s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay:1.2s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.2s;
-o-animation-fill-mode: forwards;
}
.fifth
{
animation: first 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.4s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.4s;
-o-animation-fill-mode: forwards;
}
.sixth
{
animation: first 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.5s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.5s;
-o-animation-fill-mode: forwards;
}
.seventh
{
animation: first 1s;
animation-delay: 1.6s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.6s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.6s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.6s;
-o-animation-fill-mode: forwards;
}
.eighth
{
animation: first 2s;
animation-delay: 1.7s;
animation-fill-mode: forwards;
-moz-animation: first 2s; /* Firefox */
-moz-animation-delay: 1.7s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.7s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 2s; /* Opera */
-o-animation-delay: 1.7s;
-o-animation-fill-mode: forwards;
}
.headline {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size:36px;
text-align: center;
color:#fff;
padding-top:300px;
width:300px;
margin: 0 auto;
}

spin around center with css3

infact i want to make Solar System for an Educational purpose! so a big yellow circle should be in the middle and others should spin around ! but i dont have any idea! just help with spining thing and i will find out other things! i find below code but it just spins around him self!
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
live demo : http://jsfiddle.net/hamidrezabstn/bLqak/

Refer to this tutorial/example for the solar system using CSS3:
CSS3 Solar System

Using simple CSS will do the trick:
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}

i found the simple answer too :D
.deform {
width: 200px;
height: 200px;
transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from {transform: rotateZ(0deg)}
to {transform: rotateZ(360deg)}
}
#keyframes ccircle {
from {transform: rotateZ(360deg)}
to {transform: rotateZ(0deg)}
}
Demo: http://jsfiddle.net/hamidrezabstn/fgcPa/3/embedded/result/