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;
}
Related
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>
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>
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/
At the current time, i have a rather nice CSS3 animation, however i am required to provide a fallback option for browsers that do not support CSS3 animations (IE8 being the target)
I am required to use modernizr to make thinks easier, however i'm unsure of how to go about checking if the browser supports CSS animations, if it does, great, carry on, if not, display a flash version in the form of a swf instead.
CSS Below(Warning: theres alot!):
#animation
{
margin-left: auto;
margin-right: auto;
width: 700px;
height: 400px;
background:url('Images/Animation/SkyBG.png');
}
#rain
{
width: 700px;
height: 300px;
position: absolute;
background: url('Images/Animation/RainDrop.png');
-webkit-animation-name: rain;
-webkit-animation-duration: 7s;
-webkit-animation-delay: 9s;
opacity:0;
}
#-webkit-keyframes rain {
0% {background-position: 0px 0px; opacity:0;}
50%{opacity: 1;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}
#soil
{
width: 700px;
height: 150px;
background:url('Images/Animation/BGGround.png') no-repeat;
position: absolute;
top: 750px;
z-index: 5;
}
#items
{
width:700px;
height: 400px;
top:623px;
position: absolute;
}
#Seed1
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed.png');
background-repeat: no-repeat;
background-size: 25px 50px;
margin-left: 50px;
margin-top: 140px;
}
#Seed2
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed2.png');
background-repeat: no-repeat;
background-size: 40px 55px;
margin-left: 50px;
margin-top: 140px;
}
#Seed3
{
float:left;
width: 60px;
height: 140px;
background:url('Images/Animation/Seed3.png');
background-repeat: no-repeat;
background-size: 65px 80px;
margin-left: 50px;
margin-top: 125px;
}
#Seed4
{
float:left;
width: 100px;
height: 170px;
background:url('Images/Animation/Seed4.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 50px;
}
#Seed5
{
float:left;
width: 100px;
height: 225px;
background:url('Images/Animation/Seed5.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 20px;
}
#sun {
width: 12.5px;
height: 12.5px;
border-radius: 50px;
background: red;
position: absolute;
-webkit-animation: rise 10s linear 3s 1 normal both;
-webkit-animation-delay: 21s;
-moz-animation: rise 10s linear 3s 1 normal both;
-ms-animation: rise 10s linear 3s 1 normal both;
-o-animation: rise 10s linear 3s 1 normal both;
animation: rise 10s linear 3s 1 normal both;
z-index: 0;
}
#-webkit-keyframes rise {
0% {
width: 12.5px;
height: 12.5px;
left: 0%;
top: 50%;
border-radius: 50px;
background-color: rgba(255,0,0,1);
box-shadow: 0px 0px 1px 1px rgba(255,255,0,1);
}
100% {
width: 25px;
height: 25px;
left: 80%;
top: -20%;
border-radius: 75px;
background-color: rgba(255,255,0,1);
box-shadow: 0px 0px 45px 45px rgba(255,255,0,0.7);
}
}
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes infoboxshow
{
0% {opacity:0;}
50%{opacity:1;}
}
#Seed1
{
-webkit-animation-name: show;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 5;
position:absolute;
opacity:0;
}
#infoBox1
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed2
{
z-index: 15;
position:absolute;
left: 125px;
opacity:0;
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox2
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed3
{
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 250px;
opacity:0;
}
#infoBox3
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed4
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 350px;
opacity:0;
}
#infoBox4
{
width: 400px;
height: 70px;
background:#f5cf26;
position: absolute;
bottom: 450px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed5
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 500px;
opacity:0;
}
#infoBox5
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
Modernizr would be easier. Just use Modernizr.cssanimations.
Exemplar:
<!-- ET CETERA -->
<head>
<!-- ET CETERA -->
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
if (!Modernizr.cssanimations) {
/* use jQuery to replace CSS3 animations with SWF
you may want to use JavaScript, but jQuery is just easy for me
*/
}
</script>
</head>
<!-- ... -->
For cleaner aspect, in the if statement, use jQuery to append the for a different stylesheet, e.g.:
$('head').append('<link rel="stylesheet" type="text/css" href="ie8-alternative.css">');