I have 3 animations on css what I've made in fiddle that are "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate) which is want to running by toggle onClick on an Element of "<h1>". untiil now of my achievements is just only till running to animate2 only after that I don't know how ? Please to anyone for solve this case and sorry for my bad english ...
demo on fiddle
function Animation() {
var anim = document.getElementsByTagName("h1")[0];
anim.innerText = "|"; anim.className = "animate1";
anim.addEventListener("webkitAnimationEnd", function() {anim.className = 'animate2'});
anim.addEventListener("animationend", function() {anim.className = 'animate2'});
}
#keyframes twister1 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes twister2 {
0% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(360deg);
}
20% {
transform: rotateZ(720deg);
}
30% {
transform: rotateZ(1080deg);
}
40% {
transform: rotateZ(1440deg);
}
50% {
transform: rotateZ(1800deg);
}
60% {
transform: rotateZ(2160deg);
}
70% {
transform: rotateZ(2520deg);
}
80% {
}
90% {
}
100% {
}
}
#keyframes twister3 {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.animate1 {
-webkit-animation: twister1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate2 {
-webkit-animation: twister2;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate3 {
-webkit-animation: twister3;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>
Use only one animation and simply increase/decrease the duration to control the speed:
var i = 7;
var anim = document.getElementsByTagName("h1")[0];
function Animation() {
anim.className = "animate";
anim.style.animationDuration = (i-=2) + 's';
if(i<=0) {
i=7;
}
}
#keyframes twister {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.animate {
animation: twister 5s infinite linear;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>
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 have a CSS animation for a group of spans that make out a word. I am having trouble getting them to work properly. It seems on page load or refresh, they don't work. They only work after I manually save my project file.
Here is the CSS:
.word {
margin: 2rem;
}
.word span {
cursor: pointer;
display: inline-block;
font-size: 4vw;
user-select: none;
line-height: 0.8;
animation-iteration-count: 1;
}
.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}
#keyframes balance {
0%,
100% {
transform: rotate(100deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
#keyframes shrinkjump {
10%,
35% {
transform: scale(2, 0.2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
#keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}
#keyframes rotate {
20%,
80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.word span:nth-child(5).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
.word span:nth-child(6).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
.word span:nth-child(7).active {
animation: toplong 1.5s linear;
}
.word span:nth-child(8).active {
animation: balance 1.5s ease-out;
transform-origin: top left;
}
#keyframes toplong {
10%,
40% {
transform: translateY(-48vh) scaleY(1);
}
90% {
transform: translateY(-48vh) scaleY(4);
}
}
And here is the JavaScript to change the className:
const spans = document.querySelectorAll(".word span");
spans.forEach((span, idx) => {
span.addEventListener("click", (e) => {
e.target.classList.add("active");
});
span.addEventListener("animationend", (e) => {
e.target.classList.remove("active");
});
});
Does anyone have any idea why the css is behaving this way? I have experimented with a timeout and with the JavaScript to udpate the className. Thanks!
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 have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>
Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</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;