Develop Reference

Reappear bubbles js and css

I'm trying to solve this problem, but I'm giving up and I'm here to see if you can give me some hints.
I made this bubble effect in which when I touch each bubble it pops, but I can't get the bubbles to reappear after a few seconds (as if they were new bubbles).
I leave the code here below:
function changeStyle1() {
var element = document.getElementById("pop1");
element.style.opacity = "0";
}
function changeStyle2() {
var element = document.getElementById("pop2");
element.style.opacity = "0";
}
function changeStyle3() {
var element = document.getElementById("pop3");
element.style.opacity = "0";
}
function changeStyle4() {
var element = document.getElementById("pop4");
element.style.opacity = "0";
}
function changeStyle5() {
var element = document.getElementById("pop5");
element.style.opacity = "0";
}
function changeStyle6() {
var element = document.getElementById("pop6");
element.style.opacity = "0";
}
function changeStyle7() {
var element = document.getElementById("pop7");
element.style.opacity = "0";
}
function changeStyle8() {
var element = document.getElementById("pop8");
element.style.opacity = "0";
}
function changeStyle9() {
var element = document.getElementById("pop9");
element.style.opacity = "0";
}
function changeStyle10() {
var element = document.getElementById("pop10");
element.style.opacity = "0";
}
function changeStyle11() {
var element = document.getElementById("pop11");
element.style.opacity = "0";
}
body {
background: #000;
color: #333;
font: 100% Lato, Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* OBJECTS */
button {
background: transparent;
border-color: transparent;
}
.bubble {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
}
.bubble:after {
content: '';
position: absolute;
top: 80px;
left: 80px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble::before {
content: '';
position: absolute;
top: 50px;
left: 45px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble span {
position: absolute;
border-radius: 50%;
}
.bubble span:nth-child(1) {
inset: 10px;
border-left: 15px solid #0fb4ff;
filter: blur(8px);
}
.bubble span:nth-child(2) {
inset: 10px;
border-right: 15px solid #ff4484;
filter: blur(8px);
}
.bubble span:nth-child(3) {
inset: 20px;
border-top: 15px solid #ffeb3b;
filter: blur(8px);
}
.bubble span:nth-child(4) {
inset: 30px;
border-left: 15px solid #ff4484;
filter: blur(12px);
}
.bubble span:nth-child(5) {
inset: 10px;
border-bottom: 10px solid #fff;
filter: blur(8px);
transform: rotate (330deg);
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: -5%;
top: 5%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x2 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 5%;
top: 80%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x3 {
-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 10%;
top: 40%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
.x4 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 20%;
top: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x5 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 30%;
top: 50%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x6 {
-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 50%;
top: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
.x7 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 65%;
top: 70%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x8 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 80%;
top: 10%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x9 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 90%;
top: 50%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x10 {
-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 80%;
top: 80%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x11 {
-webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 90%;
top: 90%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
/* KEYFRAMES */
#-webkit-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-moz-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-webkit-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#-moz-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
<head>
<title>Pure CSS Animated Bubbles</title>
</head>
<body>
<button type="button" onclick="changeStyle()">Click Me</button>
<div id="background-wrap">
<button id="pop1" onclick="changeStyle1()" class="bubble x1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop2" onclick="changeStyle2()" class="bubble x2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop3" onclick="changeStyle3()" class="bubble x3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop4" onclick="changeStyle4()" class="bubble x4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop5" onclick="changeStyle5()" class="bubble x5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop6" onclick="changeStyle6()" class="bubble x6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop7" onclick="changeStyle7()" class="bubble x7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop8" onclick="changeStyle8()" class="bubble x8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop9" onclick="changeStyle9()" class="bubble x9">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop10" onclick="changeStyle10()" class="bubble x10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop11" onclick="changeStyle11()" class="bubble x11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</body>
Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG

You dont need all of those functions,just one will be enough
JS
const changeStyleToBubble = (id) => {
//we get the id directly from the html element,as parameter
const element = document.getElementById(id);
element.style.opacity = "0";
//set it back to 1 after 2 seconds (2000 ms)
setTimeout(() => {
element.style.opacity = "1";
}, 2000)
}
HTML
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">

How do I add a transition effect to slowly load my page?

My page loads directly which is very fast, I basically want to load my page after some transition-duration. Once the transition fades away, the webpage should slowly load/appear.
I've been trying to figure this out for a long time but I don't know how to add a transition effect in Javascript.
<script>
var overlay = document.getElementById("loading");
window.addEventListener('load',function()
{
overlay.style.display = 'none';
})
</script>
follwoing is css file
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
}
.loading-text {
position: absolute;
top: 40%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100%;
height: auto;
line-height: 100px;
}
.loading-text span {
display: inline-block;
margin: 0 5px;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
}
.loading-text span:nth-child(1) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0s infinite linear alternate;
animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1s infinite linear alternate;
animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
animation: blur-text 1.5s 1.2s infinite linear alternate;
}
#-webkit-keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
#keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
following is html
<div id="loading">
<div class="loading-text">
<span class="loading-text-words">L</span>
<span class="loading-text-words">O</span>
<span class="loading-text-words">A</span>
<span class="loading-text-words">D</span>
<span class="loading-text-words">I</span>
<span class="loading-text-words">N</span>
<span class="loading-text-words">G</span>
</div></div>

You can hide the content at the beginning and show the loading stage with something like this:
#loading {
display: block;
}
.content {
display: none;
}
Then you could set the timeout of how much of the time you want to see the loading phase, then fade out the loader and fade in the content.
setTimeout(function(){
$("#loading").fadeOut();
$(".content").fadeIn();
}, 3000);

Trigger same CSS animation on every click

I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.
Here's my pen.
http://codepen.io/omarel/pen/JRwpZp
HTML :
click me
Jquery :
$('.addtocart').click(function () {
$(this).addClass('on');
});
CSS :
.addtocart {
position: relative;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform: translateY(-100%);
}
10% {
transform: translateY(-100%);
}
15% {
transform: translateY(0);
}
30% {
transform: translateY(-50%);
}
40% {
transform: translateY(0%);
}
100% {
opacity: 1;
}
}

You can listen to when the animation ends, then remove the class 'on'
var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one(animationEvent, function(event) {
$(this).removeClass('on')
});
});
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(this).removeClass('on')
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

Instead of using an on click event, use :focus.
.addtocart:focus {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.

You could use the .delay() and .queue()/dequeue() if you want to add/remove class :
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
Hope this helps.
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready
Example
.addClass and .removeClass

I have a solution to remove your on class every second:
var $post = $(".addtocart");
setInterval(function() {
$post.removeClass("on");
}, 1000);
http://codepen.io/anon/pen/NRZykG

As Jacob said there is no need for javascript.
You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100
-
.root {
appearance: none;
position: relative;
width: 120px;
height: 50px;
transition: all .1s linear;
transform: translate3d(0, 0, 0);
}
.animation {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
}
#keyframes pulse {
0% { opacity: 0; box-shadow: 0 0 0 1px red; }
40% { opacity: 0.8; }
80% { box-shadow: 0 0 0 80px red; }
99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}
.root:hover ._focus:focus::after,
.root:target ._target::after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 4px;
box-shadow: 0 0 0 0px red;
border-radius: 50%;
z-index: 1;
left: 20px;
top: 25px;
transform: perspective(1px) translate(-50%, -50%);
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
<div class="animation _focus" tabindex="0" onanimationend="this.blur()">
</div>
contra: steals focus
</button>
<button id="btn_1" class="root">
<a class="animation _target" href="#btn_1"></a>
contra: needs id
</button>

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/