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>
Related
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>
I'm trying to figure out how to map my assets through the js file so I can view the banner locally. I can't find any tutorials on how to code this out. Any assistance would be appreciated. I was able to upload the feed and see that IDs were generated for each item. I would like to figure out how to use my images as dynamic content (the banners use images for all elements) except the CTA and legal which is live text.
"use strict"
var dynamic = {};
function initDynamicContent(){
//====================================================== Code copied from Studio ======================================================
Enabler.setProfileId(1074113);
var devDynamicContent = {};
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed= [{}];
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0]._id = 0;
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Unique_ID = 1;
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Reporting_Label = "Internet_UF40_Offer_300x250_ON";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Product = "";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].lifestyle_bg = "images/banner-bg.jpg";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Language = "EN";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Headline_Package_Name = "ULTRAFIBRE 40";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].With_Offer = "Y";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer = "75";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer_Term_Text = "\/mo.";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Body_Package_Text = "";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA = "Discover your offer";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA_URL = {};
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA_URL.Url = "https://www.cogeco.ca";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Legal_Text = "Conditions apply.";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Default = "";
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Active = true;
Enabler.setDevDynamicContent(devDynamicContent);
//====================================================== Code copied from Studio ======================================================
//Attaching dynamic content with the feed information.
devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0];
document.getElementById("Offer").innerHTML = dynamic.Offer;
document.getElementById("Offer_Term_Text").innerHTML = dynamic.Offer_Term_Text;
document.getElementById("cta").innerHTML = dynamic.CTA;
document.getElementById("conditions").innerHTML = dynamic.Legal_Text;
document.getElementById("lifestyle_bg").src = dynamic.img_bkg.Url;
}
function addListeners () {
//Adding listeners
document.getElementById("bg-exit").addEventListener('click', bgExitHandler, false);
}
//----Exits----
function bgExitHandler(e) {
Enabler.exitOverride('Background Exit', dynamic.Landing_destino.Url);
}
//====================================================== Setting up - Don't need to change ======================================================
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
initDynamicContent();
addListeners();
}
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility;
}
#lifestyle_bg {
width: 300px;
height: 250px;
background-image: url('banner-bg.jpg');
position: absolute;
overflow: hidden;
left: 0;
top: 0;
opacity: 0;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: lifestyle_bg_animation;
-moz-animation-name: lifestyle_bg_animation;
animation-name: lifestyle_bg_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#base {
background: #ffffff;
display: inline-block;
height: 250px;
position: relative;
width: 300px;
margin-top: 187px;
-webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-webkit-animation-name: base_animation;
-moz-animation-name: base_animation;
animation-name: base_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#base:before {
border-bottom: 45px solid #ffffff;
border-left: 300px solid transparent;
border-right: 0px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -45px;
width: 0;
}
#textOne {
width: 300px;
height: 250px;
background-image: url('text1.png');
position: absolute;
overflow: hidden;
bottom: 0;
left:0;
opacity: 0;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: textOne_animation;
-moz-animation-name: textOne_animation;
animation-name: textOne_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#textTwo {
width: 300px;
height: 250px;
background-image: url('text2.png');
position: absolute;
overflow: hidden;
bottom: 0;
left: 0;
opacity: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: textTwo_animation;
-moz-animation-name: textTwo_animation;
animation-name: textTwo_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#textThree {
width: 300px;
height: 250px;
background-image: url('text3.png');
position: absolute;
overflow: hidden;
bottom: 0;
left: 0;
opacity: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: textThree_animation;
-moz-animation-name: textThree_animation;
animation-name: textThree_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#device_icon {
width: 300px;
height: 250px;
background-image: url('device_icon.png');
position: absolute;
overflow: hidden;
bottom: 0;
left:0;
opacity: 0;
-webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-webkit-animation-name: device_icon_animation;
-moz-animation-name: device_icon_animation;
animation-name: device_icon_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#device {
width: 300px;
height: 250px;
background-image: url('device.png');
position: absolute;
overflow: hidden;
top: 17px;
left: 56px;
opacity: 1;
-webkit-transform: scale(0.7); /* Safari */
-moz-transform: scale(0.7); /* Safari */
transform: scale(0.7); /* Standard syntax */
-webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
-webkit-animation-name: device_animation;
-moz-animation-name: device_animation;
animation-name: device_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#mybackground {
width: 300px;
height: 250px;
position: relative;
background-color:#00aeef;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
}
#cta {
background-color: #e87934;
width: auto;
padding: 5px 13px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
position: absolute;
line-height: 24px;
font-size: 11px;
line-height: 16px;
text-align: center;
color: #fff;
bottom: 19px;
left: 24px;
opacity: 1;
vertical-align: middle;
transform: scale(1.0);
-webkit-perspective: 1000;
-webkit-animation-name: cta_animation;
-moz-animation-name: cta_animation;
animation-name: cta_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#conditions {
width: auto;
font-family: Tahoma, Verdana, Segoe, sans-serif;
position: absolute;
font-size: 8px;
text-align: center;
color: #000;
bottom: 4px;
left: 24px;
opacity: 1;
-webkit-animation-name: conditions_animation;
-moz-animation-name: conditions_animation;
animation-name: conditions_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#cogeco-logo {
background-image: url('cogeco-logo.png');
width:300px;
height:250px;
position: absolute;
bottom: 0;
right: 0;
opacity:1;
-webkit-animation-name: logo_animation;
-moz-animation-name: logo_animation;
animation-name: logo_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
animation-iteration-count: 1;
}
#keyframes lifestyle_bg_animation {
0% {
margin-top:0;
opacity:1;
}
35% {
margin-top:0;
opacity:1;}
45% {
margin-top:0;
opacity:0;}
100% {
margin-top:0;
opacity:0;
}
}
#keyframes base_animation {
0% {
margin-top:300px;
}
5% {
margin-top: 300px;
}
15% {
margin-top: 187px;
}
100% {
margin-top: 187px;
}
}
#keyframes textOne_animation {
0% {
opacity: 0;
}
12% {
opacity: 0;
}
17% {
opacity: 1;
}
35% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes logo_animation {
0% {
opacity: 0;
}
58% {
opacity: 0;
}
68% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes device_icon_animation {
0% {
opacity: 0;
margin-left: 30px;
}
12% {
opacity: 0;
margin-left: 30px;
}
17% {
opacity: 1;
margin-left:0;
}
35% {
opacity: 1;
margin-left:0;
}
45% {
opacity: 0;
margin-left:0;
}
100% {
opacity: 0;
margin-left:0;
}
}
#keyframes device_animation {
0% {
opacity: 0;
top: 30px;
left:0;
-webkit-transform: scale(1); /* Safari */
-moz-transform: scale(1); /* Safari */
transform: scale(1); /* Standard syntax */
}
40% {
opacity: 0;
top:30px;
left:0;
}
50% {
opacity: 1;
top:0;
left:0;
-webkit-transform: scale(1); /* Safari */
-moz-transform: scale(1); /* Safari */
transform: scale(1); /* Standard syntax */
}
60% {
opacity: 1;
top: 17px;
left: 56px;
-webkit-transform: scale(0.7); /* Safari */
-moz-transform: scale(0.7); /* Safari */
transform: scale(0.7); /* Standard syntax */
}
100% {
opacity: 1;
top: 17px;
left: 56px;
-webkit-transform: scale(0.7); /* Safari */
-moz-transform: scale(0.7); /* Safari */
transform: scale(0.7); /* Standard syntax */
}
}
#keyframes textTwo_animation {
0% {
opacity: 0;
}
58% {
opacity: 0;
}
68% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes textThree_animation {
0% {
opacity: 0;
}
61% {
opacity: 0;
}
71% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cta_animation {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
88% {
opacity: 1;
transform:scale(1.0);-webkit-perspective:1000;
}
89% {
opacity: 1;
transform:scale(1.1);
}
91% {
opacity: 1;
transform:scale(1.0);-webkit-perspective:1000;
}
100% {
opacity: 1;
}
}
#keyframes conditions_animation {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ATENTION!!!! Change your ad size below. -->
<meta name="ad.size" content="width=300,height=250">
<title>HTML5 Dynamic 300x250 template</title>
<!-- CSS -->
<link rel="stylesheet" href="HTML5_Dynamic_300x250_template.css">
<!-- JS -->
<script src="HTML5_Dynamic_300x250_template.js"></script>
<!-- Enabler should always come first. -->
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
</head>
<html>
<body style="width:300px;height:250px; margin:0 auto;">
<a href="#" id="clickthrough-button" class="button clickthrough">
<div id="mybackground">
<div id="lifestyle_bg"></div>
<div id="base"></div>
<div id="find_out"></div>
<div id="cogeco-logo"></div>
<div id="textOne"></div>
<div id="textTwo"></div>
<div id="textThree"></div>
<div id="device"></div>
<div id="device_icon"></div>
<div id="cta">Discover your offer</div>
<div id="conditions">Conditions apply.</div>
</div>
</a>
</body>
</html>
You need to change "devDynamicContent to dynamicContent when you reference your dynamic content.
E.g.
document.getElementById("Offer").innerHTML = dynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer;
document.getElementById("Offer_Term_Text").innerHTML = dynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer_Term_Text;
I have the next code for my loader, is the same at w3school.
css:
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
But if i put an image, the image spin like the css animation, i want a image at the center of the loader.
I use background-image in another div not work.
This is my fiddle
Remove Border property from the #loader_upload2 and add background there.
Your Working Fiddle
#loader_upload2 {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 190px;
height: 190px;
margin: -75px 0 0 -75px;
border-radius: 50%;
width: 140px;
height: 140px;
background: url('https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg');
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
try this
<div id="loader_upload2">
</div>
<div id="image">
</div>
css
#image{
background: url(https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg) no-repeat;
z-index: 99999;
display: inline-block;
background-size: 100% 100%;
width: 90px;
height: 90px;
position: absolute;
top: 45%;
lefT: 50%;
margin-left: -36px;
}
#loader_upload2 {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 190px;
height: 190px;
margin: -75px 0 0 -75px;
border: 16px solid #808080;
border-radius: 50%;
border-top: 16px solid #85C440;
width: 140px;
height: 140px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
demo:https://fiddle.jshell.net/mhrjnsa1/pcgfo8mx/13/
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;
}
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/