Develop Reference

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

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

How do I map assets through the js file in DoubleClick Studio?

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;

Jumping dots animation

So let's say I have three dots as spans inside a parent element.
I need to create a parent hover animation that will make the dots jump one by one with delay. I accomplished this without hover but I need the animation to work when I hover the parent element. At the moment when I hover the parent element no delay is applied to the children.
.dots-cont {
position: absolute;
right: 0px;
bottom: 0px;
}
.dot {
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>

You just need to add the animation property to .dot base instead of the :hover version. This way, you will get the same behavior no matter what. You can add any properties you want to the hover class, like changing the color.
.dots {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/5/
EDIT: To prevent animation on dot hover.
.dots-cont:hover > .dot {
animation: none;
}
https://jsfiddle.net/3gampq0b/6/
EDIT: Only animate on parent hover.
You can also add padding to the .dots-cont so the hover surface area is greater.
.dots-cont:hover > * {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/7/

By Using "animation: jump 1s infinite;" directly, you are overriding the animation-delay property for .dot elements.
Try Below snippet, see if this is what you are trying to do:
.dots-cont{
position: absolute;
left: 100px;
top: 100px;
}
.dot{
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation-name: jump;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
from {bottom: 0px}
to {bottom: 20px}
}
#-webkit-keyframes jump {
from {bottom: 0px}
to {bottom: 10px}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>

I changed
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
to
.anim .dot {...}
Then i add and remove anim class with jQuery.

Keyframes animation not running backwards

I'm creating an animation effect (decreasing the height slowly) as part of a keyframes animation. The animation plays forwards once, but doesn't play backwards and doesn't play on subsequent times.
JSFiddle here - http://jsfiddle.net/shaaraddalvi/eLwcw22e/
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation 1s backwards;
-moz-animation: someanimation 1s backwards;
-ms-animation: someanimation 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
Scroll through the page to get the desired effect. (Tested currently on chrome, isn't working that well on Edge).

You can achieve this by adding another keyframe animation like this:
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#-webkit-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-moz-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-ms-keyframes someanimation2 {
from: { padding: 10px 0px; }
to: { padding: 100px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation2 1s backwards;
-moz-animation: someanimation2 1s backwards;
-ms-animation: someanimation2 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
You can also check this Fiddle

You can achieve this without using animation. Hope this is the effect you want.
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#banner-container {
padding: 100px 0;
background-color: orange;
}
#banner-container {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
padding: 20px 0;
}
#banner-container.dynamic {
padding: 100px 0;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#banner-container.static + #buffer {
padding-top: 268px;
}
#banner-container.dynamic + #buffer {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
padding-top: 88px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>

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;
}