Controlling CSS animation - javascript

Is there any way to fully control the CSS animation with javascript? I need to change state of the animation by clicking the button.
#keyframes example {
0% {transform: translate(0,0);}
29% {transform: translate(0,0);}
33% {transform: translate(-100px,0);}
62% {transform: translate(-100px,0);}
66% {transform: translate(-200px,0);}
96% {transform: translate(-200px,0);}
100% {transform: translate(0,0);}}
Is there any possibility to change animation state to 50% when the button is clicked?
I want to make a slider with minimum js, but need to handle this small dots.
If there is no way to do that, could you tell me how to do that with different way?
#box
{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
#all
{
width:300px;
height:100px;
animation-name: example;
animation-duration: 13.5s;
animation-iteration-count: infinite;
}
.box1
{
width:100px;
height:100px;
background-color:red;
float:left;
}
.box2
{
width:100px;
height:100px;
background-color:blue;
float:left;
}
.box3
{
width:100px;
height:100px;
background-color:green;
float:left;
}
#keyframes example {
0% {transform: translate(0,0);}
29% {transform: translate(0,0);}
33% {transform: translate(-100px,0);}
62% {transform: translate(-100px,0);}
66% {transform: translate(-200px,0);}
96% {transform: translate(-200px,0);}
100% {transform: translate(0,0);}
}
#keyframes example2 {
0% {background-color:black;}
29% {background-color:black;}
33% {background-color:white;}
62% {background-color:white;}
66% {background-color:white;}
96% {background-color:white;}
100% {background-color:black;}
}
#keyframes example3 {
0% {background-color:white;}
29% {background-color:white;}
33% {background-color:black;}
62% {background-color:black;}
66% {background-color:white;}
96% {background-color:white;}
100% {background-color:white;}
}
#keyframes example4 {
0% {background-color:white;}
29% {background-color:white;}
33% {background-color:white;}
62% {background-color:white;}
66% {background-color:black;}
96% {background-color:black;}
100% {background-color:white;}
}
.circle
{
width:10px;
height:10px;
background-color:white;
border-radius:5px;
float:left;
margin-left:10px;
}
.circle1
{
animation-name: example2;
animation-duration: 13.5s;
animation-iteration-count: infinite;
}
.circle2
{
animation-name: example3;
animation-duration: 13.5s;
animation-iteration-count: infinite;
}
.circle3
{
animation-name: example4;
animation-duration: 13.5s;
animation-iteration-count: infinite;
}
#circles
{
position:absolute;
bottom:10px;
left:15px;
}
span
{
color:white;
margin-top:20px;
display:block;
text-align:center;
}
<div id="box">
<div id="all">
<div class="box1"><span>fdsaf</span></div><div class="box2"><span>fdsafd</span></div><div class="box3"><span>fdsafdsaf</span></div>
</div>
<div id="circles"><div class="circle circle1"></div><div class="circle circle2"></div><div class="circle circle3"></div></div>
</div>


I'm going to go out on a limb here and say "no", even though it might be technically feasible in some bizarro way. Also, from a uber-nerd programmer perspective, this is violating separation of concerns (some people don't care, i know i know) as well as a pretty weird thing to do.
That being said, my rec is do the whole thing in CSS (i.e. the button click adds/toggles a class, which triggers the transition or animation). This way, you could have a bunch of different classes ready to go to fire different animations for different states or button presses or whatevs.
Conversely, you could be completely awesome and ditch the css-animation altogether just do the whole thing in vanilla javascript or it's lesser sidekick Jquery.
Your choice my friend, but don't mix and match them the way you have in mind, you're not going to have a great time.

Related

Growing bar animation in CSS

Is it possible to create a "growing bar" animation in css?
Example:
http://i.stack.imgur.com/lWIkw.gif
if no is this javascript the right approach?
window.addEventListener("Click",test());
i=0;
function test(){
setTimeout(function(){
i+=5;
document.getElementById('growing-bar').style.height = i + 'px';
if(i<99){
test();
}
},50);
}
#growing-bar{
background:red;
width:50px;
margin:50px;
}
<div id="growing-bar"></div>
working Fiddle
Thanks in advance!

Here's a pure CSS solution:
div {
height: 10px;
width: 50px;
background: black;
animation-name: grow;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes grow {
100% { height: 100px; };
}
<div></div>

You can utilize transform-origin set to top, translate set to 0%, 0%, transform rotate set to 180deg for height animation to be applied vertically; include forwards at animation declaration
#growing-bar{
background:red;
width:50px;
margin:50px;
position:relative;
top:100px;
transform-origin:top;
transform: translate(0%, 0%) rotate(180deg);
animation: grow 20s forwards;
}
#keyframes grow {
from {
height:0px;
}
to {
height:150px;
}
}
<div id="growing-bar"></div>

Creating a radial progress bar with css animation on button click

I've had a big problem trying to achieve this. I don't understand how to animate something so that it turns in a circle so I grabbed a working one from Circle Progress Bar and am trying to find a way to make it animate on button click using jquery. I tried using this tutorial but have no idea how to properly incorporate it. Please help. Here is my Fiddle though it doesn't come close to working.
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activatedAfter {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
}
.activated {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}

I changed $('#progress') to $('.progress') in your fiddle since 'progress' is a class and not an ID. Also, I replaced the activatedAfter style with the activated:after and activated:before styles from the example in the link you provided.
Also, I added the jQuery library in the code (it was not included in your fiddle)
Try this
$('#battleButton').click(function() {
$('.progress').addClass('activated activatedAfter');
});
body {
background-color: #000;
}
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activated:after {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:-50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
transform-origin:100% 50%;
z-index:1;
}
.activated:before {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
transform-origin:0% 50%;
z-index:2;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
button {
background-color: rgba(0, 0, 0, 0);
border-color: #81ff14;
color: #81ff14;
border-radius: 10%;
float: right;
margin-right: 100px;
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
<button id="battleButton">Battle</button>

How to change CSS property using variable in a string

So I'm trying to change the animation of speed of something on my page, however when I try and use a variable name in the string portion the animation breaks. I'm sure this just has to do with how I am handling the string, but I already tried a couple of alternatives and my animation still breaks either way. If somehow could advise me I would be appreciative.
var speed = 5;
speed = speed.toString() + 's infinite';
$('#ball').click(function () {
$('#ball').css('animation', 'bounce' + speed);
});

Bottom features include an animation;
animation-name: initial;
animation-duration: 3s;
animation-timing-function: bounce;
animation-delay: initial;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
Animation enriched by editing with them.

I guess it's much better just update the classname for instance you have a two classes:
.animate {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 1s;
}
.slower{
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
And then you handle this with jQuery as follows:
$('#ball').click(function () {
$(this).addClass('slower');
});

animate an image from bottom to top

I have an image of a little tree and I would like to make it grow from bottom to top using jQuery and CSS.
For the moment the tree has bottom position to 0 and goes up with animate() jQuery function.
I can make a div that overlaps to the tree and animate it with animate() jquery function and removing the height to it, but the original background (of the body) uses a CSS gradient so I can't make the div overlap the image.
Here is my code:
CSS:
.wrap_tree{
height:300px;
position:relative;
}
.tree{
overflow: hidden;
position:absolute;
display:none;
bottom:0px;
width:200px;
left:28%;
}
HTML:
<div class="wrap_tree">
<div class="tree">
<img src="tree.png"/>
</div>
</div>
JavaScript/jQuery:
$('.tree').animate({
height: 'toggle'
},5000);

How about doing this with Pure CSS? I made it from scratch using CSS3 #keyframe
Explanation: Am just overlapping the tree using an absolute positioned element, and than using #keyframe am collapsing the height property to 0, rest is self explanatory.
Demo
Demo 2 (Added position: relative; to the container element as this is important to do else your position: absolute; element will run out in the wild)
Demo 3 Tweaking up animation-duration for slower animation rate
.tree {
width: 300px;
position: relative;
}
.tree > div {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-name: hello;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.tree img {
max-width: 100%;
}
#keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
#-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}

HTML
<div><img src="image03.png" /></div>
CSS
div {
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
animation: myfirst 5s linear 2s infinite alternate;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes myfirst {
0% {left:0px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
#keyframes myfirst {
0% {left:0px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

Firefox will not update changes to CSS Animation

I am working on a site that is using css animations and I am having some trouble with firefox.
In some instances it seems like firefox is not reading the updated css file and in other places the css updates. I have tried a few things to clear the cache and did a hard reload to see if the changes in the css would reflect on the site. I went as far as to uninstall and reinstall firefox. Here is what I have encountered. The keyframe animation works perfectly in chrome and safari so far (been avoiding IE headaches). I noticed in testing firefox shows one of the text elements about 100px above where it should be. All the values are the same across the browser specific code. The strange part is if I try and change any of the values using firefox prefix it does not change. Say original top is set to 10px and I will change it to 500px, firefox will render it at the same position as 10px. Another reason I thought this might be an issue with firefox not reloading the css file is that I tried commenting off the entire section that animates the text and it will still animate as if I did not comment the code out. In the other browsers the commented animation would simply not animate. I did another test by changing the a text color to red instead of white and that change actually updated.
Additionally I use javascript to reverse the animation by removing the class and replacing it with a reverse animation class. These work fine in chrome and safari as well, but only one of the animated elements works in reverse, but does not change the animation delay to zero in the firefox code.
I could use a fresh pair of eyes to see what exactly going on.
Thanks for your help.
Here is the jsfiddle link. I can add screenshots if that helps but the jsfiddle is probably the easiest to see what I am talking about.
http://jsfiddle.net/JustALittleHeat/A5gMJ/1/
HTML
<body>
<div id= "aboutWrapper">
<div id= "quoteContainer">
<div id="quoteButton" class= "quoteButton" onclick="changeClass()"
onmouseover="mouseOver()" onmouseout="mouseOut()">-</div>
<h1 id="quotationMarks1" class="quotationMarks1">"</h1>
<p id ="quote" class ="quote"><em><strong>&nbsp &nbsp &nbsp &nbsp THE BETTER THE
PEOPLE YOU SURROUND YOURSELF WITH, THE BETTER YOU'RE GOING TO DO, FOR YOURSELF AND THE
CONSUMER.</strong></em></p><h1 id="quotationMarks2" class="quotationMarks2">"</h1> <h2
id="cecil" class="cecil">- Cecil Van Tuyl</h2>
</div>
<div id="aboutContainer" class="aboutContainer">
<h1 class="pageParaHeader">About Us</h1>
<p class="textBody"><strong class="dropCap">V</strong>&nbsp &nbsp &nbsp &nbsp an
Tuyl Group, Inc. provides management consulting <br> &nbsp &nbsp &nbsp &nbsp services
to the largest group of privately held automotive dealerships in the United States. With
offices in Arizona, Kansas, and Texas, the management consulting group works with
approximately seventy independently operated dealerships nationwide.<br> <br> &nbsp
&nbsp &nbsp &nbsp The Van Tuyl family has had a long history with the automotive
industry, starting with Cecil Van Tuyl and a Kansas City Chevrolet dealership in 1955.
Joined by his son Larry in 1971, they have built a world class management consulting
company based on the principles of hiring the right people and giving their dealership
clients the right tools, training and support they need to succeed.</p>
</div>
</div>
</body>
CSS
/*-------------Style Quote Block. NOT IE VERION-----------------------------*/
#aboutWrapper { position:relative; height:400px; width:100%; max-width:800px; margin-right:auto; margin-left:auto;
}
#quoteContainer {position:absolute; padding-left:20px; margin-left:auto; margin-right:auto; width:800px; height:200px;
}
.quoteButton {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0;
}
.quoteButtonMin {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0; color:#069ec7; font-size: 3em; line-height: 15px;
-webkit-animation: buttonMin 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMin 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMin 1s ease-in-out;
animation-fill-mode: forwards;
}
.quoteButtonMin:hover {color:#3ccaf0;}
.quote {position:absolute; width:800px; color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px;
-webkit-animation: quoteMove 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: quoteMove 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: quoteMove 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.quotationMarks1 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;
-webkit-animation: markMove1 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove1 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.quotationMarks2 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;
-webkit-animation: markMove2 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.cecil {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;
-webkit-animation: cecilMove 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMove 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
/*--------------------------------------Button Minimize--------------------*/
#-webkit-keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
#-moz-keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
#keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
/*-----------------------------------Quote Animation------------------*/
#-webkit-keyframes quoteMove {
0% {-webkit-transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {-webkit-transform:scale(0,0);opacity:0;}
100% {-webkit-transform:scale(0,0);opacity:0;}
}
#-moz-keyframes quoteMove {
0% {-moz-transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {-moz-transform:scale(0,0);opacity:0;}
100% {-moz-transform:scale(0,0);opacity:0;}
}
#keyframes quoteMove {
0% {transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {transform:scale(0,0);opacity:0;}
100% {transform:scale(0,0);opacity:0;}
}
/*--------------------------Quotation Marks 1------------------------------*/
#-webkit-keyframes markMove1 {
0% {left:10px; top:103; -webkit-transform: scale(1,1);}
50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
90% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}
#-moz-keyframes markMove1 {
0% {left:10px; top:103; -moz-transform: scale(1,1);}
50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
90% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
}
#keyframes markMove1 {
0% {left:10px; top:103; transform: scale(1,1);}
50% {left:325px;top:-50px;transform: scale(1,1);}
90% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
}
/*-------------------------Quotation Marks 2----------------------------*/
#-webkit-keyframes markMove2 {
0% {left:696px; top:-15;-webkit-transform: scale(1,1);}
50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
90% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
100% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}
#-moz-keyframes markMove2 {
0% {left:696px; top:-15;-moz-transform: scale(1,1);}
50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
90% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
100% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
}
#keyframes markMove2 {
0% {left:696px; top:-15; transform: scale(1,1);}
50% {left:395px;top:-50px; transform: scale(1,1);}
90% {left:30px;top:-50px; transform: scale(0.45,0.45);}
100% {left:30px;top:-160px; transform: scale(0.45,0.45);}
}
/*-----------------------------Cecil Move-------------------*/
#-webkit-keyframes cecilMove {
0% {left:340px; top:120px; -webkit-transform: scale(1,1); }
25% {left:490px;top:120px; -webkit-transform: scale(1,1);}
50% {left:490px;top:40px; -webkit-transform: scale(1,1);}
90% {left:-30px;top:63px; -webkit-transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; -webkit-transform: scale(0.35,0.35);}
}
#keyframes cecilMove {
0% {left:340px; top:120px; transform: scale(1,1); }
25% {left:490px;top:120px; transform: scale(1,1);}
50% {left:490px;top:40px; transform: scale(1,1);}
90% {left:-30px;top:63px; transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; transform: scale(0.35,0.35);}
}
#-moz-keyframes cecilMove {
0% {left:340px; top:120px; -moz-transform: scale(1,1); }
25% {left:490px;top:120px; -moz-transform: scale(1,1);}
50% {left:490px;top:40px; -moz-transform: scale(1,1);}
90% {left:-30px;top:63px; -moz-transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; -moz-transform: scale(0.35,0.35);}
}
/*-------------------- Reverse Animation Classes-------------*/
.quoteR {position:absolute; width:800px; color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px;
-webkit-animation: quoteMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .45s;
-moz-animation: quoteMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: .45s;
animation: quoteMove 2.5s ease-in-out;
animation-fill-mode: forwards;
animation-delay: .45s;
}
.quoteButtonMinR {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:1; color:#069ec7; font-size: 3em; line-height: 15px;
-webkit-animation: buttonMinR 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMinR 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMinR 1s ease-in-out;
animation-fill-mode: forwards;
}
.quotationMarks1R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;
-webkit-animation: markMove1R 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1R 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove1R 2.5s ease-in-out;
animation-fill-mode: forwards;
}
.quotationMarks2R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;
-webkit-animation: markMove2R 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2R 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out;
animation-fill-mode: forwards;
}
.cecilR {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;
-webkit-animation: cecilMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out;
animation-fill-mode: forwards;
}
/*-----------------------------Button Animation Reverse--------------------*/
#-webkit-keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
#-moz-keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
#keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
/*--------------------------------Quote Reverse-----------------------------------*/
#-webkit-keyframes quoteMoveR {
0% {-webkit-transform:scale(0,0);opacity:0;}
50% {-webkit-transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {-webkit-transform:scale(1,1);opacity:1;}
}
#-moz-keyframes quoteMoveR {
0% {-moz-transform:scale(0,0);opacity:0;}
50% {-moz-transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {-moz-transform:scale(1,1);opacity:1;}
}
#keyframes quoteMoveR {
0% {transform:scale(0,0);opacity:0;}
50% {transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {transform:scale(1,1);opacity:1;}
}
/*-----------------------------------Quotation Marks 1 Reverse-----------------*/
#-webkit-keyframes markMove1R {
0% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
100% {left:10px; top:103; -webkit-transform: scale(1,1);}
}
#-moz-keyframes markMove1R {
0% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
100% {left:10px; top:103; -moz-transform: scale(1,1);}
}
#-keyframes markMove1R {
0% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;transform: scale(1,1);}
100% {left:10px; top:103;transform: scale(1,1);}
}
/*----------------------------------Quotation Marks 2 Reverse-------------------------------*/
#-webkit-keyframes markMove2R {
0% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
100% {left:696px; top:-15;-webkit-transform: scale(1,1);}
}
#-moz-keyframes markMove2R {
0% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
100% {left:696px; top:-15;-moz-transform: scale(1,1);}
}
#keyframes markMove2R {
0% {left:30px;top:-160px;transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;transform: scale(1,1);}
100% {left:696px; top:-15;transform: scale(1,1);}
}
/*-----------------------------Cecil Move Reverse-----------------------------*/
#-webkit-keyframes cecilMoveR {
0% {left:-30px;top:-45px;-webkit-transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;-webkit-transform: scale(0.35,0.35);}
50% {left:490px;top:40px;-webkit-transform: scale(1,1);}
75% {left:490px;top:120px;-webkit-transform: scale(1,1);}
100% {left:340px; top:120px;-webkit-transform: scale(1,1); }
}
#-moz-keyframes cecilMoveR {
0% {left:-30px;top:-45px;-moz-transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;-moz-transform: scale(0.35,0.35);}
50% {left:490px;top:40px;-moz-transform: scale(1,1);}
75% {left:490px;top:120px;-moz-transform: scale(1,1);}
100% {left:340px; top:120px;-moz-transform: scale(1,1); }
}
#keyframes cecilMoveR {
0% {left:-30px;top:-45px;transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;transform: scale(0.35,0.35);}
50% {left:490px;top:40px;transform: scale(1,1);}
75% {left:490px;top:120px;transform: scale(1,1);}
100% {left:340px; top:120px;transform: scale(1,1); }
}
/*-----------About Us IE Version Not setup-----------------------*/
.aboutContainer {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;
-webkit-animation: aboutShow 2s ease-in-out;
-webkit-animation-delay:5s;
-webkit-animation-fill-mode: forwards;
-moz-animation: aboutShow 2s ease-in-out;
-moz-animation-delay:5s;
-moz-animation-fill-mode: forwards;
animation: aboutShow 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.aboutContainerR {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;
-webkit-animation: aboutShowR 2s ease-in-out;
-webkit-animation-fill-mode:both;
-moz-animation: aboutShowR 2s ease-in-out;
-moz-animation-fill-mode:both;
animation: aboutShowR 2s ease-in-out;
animation-fill-mode: both;
}
.pageParaHeader {font-family: arial; font-size: 3em; color:#069ec7;
}
.textBody {position: relative; margin-top: -20px; color:white;
}
.dropCap {position:absolute; font-size:2.5em; top:-4px;color:#069ec7;
}
#-webkit-keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
#-moz-keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
#keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
body {background:black;}
Javascript
function changeClass() {
if (document.getElementById("quotationMarks1").className === "quotationMarks1")
{document.getElementById("quotationMarks1").className = "quotationMarks1R";
document.getElementById("quotationMarks2").className = "quotationMarks2R";
document.getElementById("quote").className = "quoteR";
document.getElementById("cecil").className = "cecilR";
document.getElementById("aboutContainer").className ="aboutContainerR";
document.getElementById("quoteButton").className ="quoteButtonMin";
}
else {
document.getElementById("quotationMarks1").className = "quotationMarks1";
document.getElementById("quotationMarks2").className = "quotationMarks2";
document.getElementById("quote").className = "quote";
document.getElementById("cecil").className = "cecil";
document.getElementById("aboutContainer").className ="aboutContainer";
document.getElementById("quoteButton").className ="quoteButtonMinR";
document.getElementById("quotationMarks1").style.webkitAnimationDelay = "0s";
document.getElementById("quotationMarks2").style.webkitAnimationDelay = "0s";
document.getElementById("quote").style.webkitAnimationDelay = "0s";
document.getElementById("cecil").style.webkitAnimationDelay = "0s";
document.getElementById("aboutContainer").style.webkitAnimationDelay = "0s";
document.getElementById("quotationMarks1").style.mozAnimationDelay = "0s";
document.getElementById("quotationMarks2").style.mozAnimationDelay = "0s";
document.getElementById("quote").style.mozAnimationDelay = "0s";
document.getElementById("cecil").style.mozAnimationDelay = "0s";
document.getElementById("aboutContainer").style.mozAnimationDelay = "0s";
document.getElementById("quotationMarks1").style.AnimationDelay = "0s";
document.getElementById("quotationMarks2").style.AnimationDelay = "0s";
document.getElementById("quote").style.AnimationDelay = "0s";
document.getElementById("cecil").style.AnimationDelay = "0s";
document.getElementById("aboutContainer").style.AnimationDelay = "0s";
document.getElementById("quoteButton").className ="quoteButton";
}
}
function mouseOver() {
document.getElementById("quotationMarks1").style.color = "#3ccaf0";
document.getElementById("quotationMarks2").style.color = "#3ccaf0";
}
function mouseOut() {
document.getElementById("quotationMarks1").style.color = "#069ec7";
document.getElementById("quotationMarks2").style.color = "#069ec7";
}

You simply forgot to change the animation name from markMove2 to cecilMove
.cecil { ... animation: cecilkMove2 2s ease-in-out; }
Demo
Also, you should use javascript variables to keep track of your DOM elements instead of getting them by their ID every time. It performs better, is easier to upkeep, and is easier to write as well

Categories

Resources