Develop Reference

Reverse animation on page transition

I have a few pages on my website and i made a header animation (pulldown). So, i need to reverse my animation (pullUp) when the other one page is clicked. Is there any option to do that ? Or is there any option to make the second animation (pullup) active when the other page is selleced
header{
background-color:black;
height:80px;
text-align:center;
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}

There are a few options I can recommend:
Use CSS's :active selector to bind to the hash of the "pulldown" item:
```
second-page:active ~ .drawer {
animation: "pullUp" 1s linear;
}
```
So that when the user clicks on the url to your second page (#second-page), the animation will trigger, thus hiding the drawer itself.
Use Javascript to toggle classes:
(jQuery)
var $drawer = $(".drawer");
var $drawerToggle = $(".drawer-toggle").on("click", function() {
$drawer.toggle("fast");
}
Use an input[type="checkbox"] 'hack':
.drawer-toggle:checked ~ .drawer {
animation: "pullDown" 1s linear;
}
.drawer-toggle ~ .drawer {
animation: "pullUp" 1s linear;
}

Here is my code http://codepen.io/anon/pen/zrXrXM but as i told, when i click on <a> element, page transition is instantly. Is there any possible way to stop transition for a few seccond ?

How to use CSS \cubic-bezier to implement sine function?

I'm going to implement CSS width animation in sine function like:
But with cubic-bezier, I can only set four parameters like transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275);.
Is it position to achieve this using CSS animation? Or else how to do this in JS?

You can imitate sine function using cubic-bezier()
Have a look at this resource for sine approximation: Sine approximation using cubic Bézier curves
Using 4 keyframes and cubic-bezier() with values:
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
will move an object with sine function trajectory.
I made a demo for your case. Pure CSS solution, please have a look:
DEMO
.box {
width: 20px;
height: 20px;
background-color: royalblue;
animation-fill-mode: forwards;
animation:
sine1-1 0.3s 1 0s cubic-bezier(0,0,0.3642,1),
sine1-2 0.3s 1 0.3s cubic-bezier(0.6358,0,1,1),
sine1-3 0.3s 1 0.6s cubic-bezier(0,0,0.3642,1),
sine1-4 0.3s 1 0.9s cubic-bezier(0.6358,0,1,1),
sine2-1 0.3s 1 1.2s cubic-bezier(0,0,0.3642,1),
sine2-2 0.3s 1 1.5s cubic-bezier(0.6358,0,1,1),
sine2-3 0.3s 1 1.8s cubic-bezier(0,0,0.3642,1),
sine2-4 0.3s 1 2.1s cubic-bezier(0.6358,0,1,1),
sine3-1 0.3s 1 2.4s cubic-bezier(0,0,0.3642,1),
sine3-2 0.3s 1 2.7s cubic-bezier(0.6358,0,1,1);
}
#keyframes sine1-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-100px)}
}
#keyframes sine1-2 {
0% {transform: translateY(-100px)}
100% {transform: translateY(0)}
}
#keyframes sine1-3 {
0% {transform: translateY(0)}
100% {transform: translateY(80px)}
}
#keyframes sine1-4 {
0% {transform: translateY(80px)}
100% {transform: translateY(0)}
}
#keyframes sine2-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-60px)}
}
#keyframes sine2-2 {
0% {transform: translateY(-60px)}
100% {transform: translateY(0)}
}
#keyframes sine2-3 {
0% {transform: translateY(0)}
100% {transform: translateY(40px)}
}
#keyframes sine2-4 {
0% {transform: translateY(40px)}
100% {transform: translateY(0)}
}
#keyframes sine3-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-20px)}
}
#keyframes sine3-2 {
0% {transform: translateY(-20px)}
100% {transform: translateY(0)}
}
.horizontal {
animation: move-horizontal 3s 1 linear;
}
#keyframes move-horizontal {
0% {transform: translateX(0)}
100% {transform: translateX(400px)}
}
.wrap {
background-color: #bfbfbf;
}
.margin {
width: 100px;
height: 100px;
}
<div class="margin"></div>
<div class="wrap">
<div class="horizontal">
<div class="box"></div>
</div>
</div>

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

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

I need to override the default slide effect to dissolve effect.
When changePage function is called I need to slowly dissolve the current page to new page.
I tried with following CSS
#keyframes dissolve {
0% { opacity:1; }
5% { opacity:0.9;}
15% { opacity:0.7;}
25% { opacity:0.5;}
35% { opacity:0.3;}
45% { opacity:0;}
55% { opacity:0.2;}
65% { opacity:0.4;}
75% { opacity:0.6;}
85% { opacity:0.8;}
95% { opacity:0.9;}
100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
-webkit-animation-name: dissolve;
-moz-animation-name: dissolve;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 350ms
}
I have created a fiddle with above css.
The page transistion is not smooth with above code.
How to correct page transistion to run smoothly?

you need also vendor prefixes in #keyframes: #-webkit-keyframes and so on ..

I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile.
Please add #-webkit-keyframes ,#-moz-keyframes, and #-o-keyframes in CSS like #keyframes added below.
#keyframes dissolve-out {
0% { opacity: 1; }
20% { opacity: 0.5; }
40% { opacity: 0.2; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes dissolve-in {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0; }
60% { opacity: 0.2; }
80% { opacity: 0.6; }
100% { opacity: 1; }
}
.slideup.in, .slide.in, .slide.in.reverse {
-webkit-animation: dissolve-in;
-moz-animation: dissolve-in;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
-webkit-transform: translateX(0%);
-webkit-animation: dissolve-out;
-moz-transform: translateX(0%);
-moz-animation: dissolve-out;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
Please see the demo.
Above CSS will give you a dissolve effect with overriding the default slide effect of page transistion in jQuery Mobile.

Create a bounce effect on hover

I have to develop a similar website like http://www.unlocknrepair.com/
In this website when you hover your mouse over the Unlocking or Phone repair button a dropdown menu appears. Is there a way to make this dropdown appear in bouncy way.. like I want it to bounce a bit before it stabilizes. It is possible in jQuery, but can it be done using only css and javascript?

If experimental css3 is an option, you can do it even without javascript using css animations with the #keyframes rule.
#parent {
position:relative;
height: 40px;
}
#onhover {
display: none;
position: absolute;
top: 0;
}
#parent:hover #onhover {
display: block;
top: 30px;
animation:mymove 0.8s linear;
-moz-animation:mymove 0.8s linear; /* Firefox */
-webkit-animation:mymove 0.8s linear; /* Safari and Chrome */
-o-animation:mymove 0.8s linear; /* Opera */
-ms-animation:mymove 0.8s linear; /* IE */
}
#keyframes mymove
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-o-keyframes mymove /* Opera */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-ms-keyframes mymove /* IE */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
<div id="parent">hover me<div id="onhover">hovering</div></div>
Another "bounce" animation:
$(function() {
$(document.body).delegate( "img", "mouseenter", function() {
var $this = $(this).addClass("right");
setTimeout(function() {
$this.removeClass("right");
}, 2000);
});
});
body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
-moz-transition: -moz-transform 1s ease-in;
-webkit-transition: -webkit-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
-ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
-moz-animation-name: bounce;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-transform: translate(400px);
-moz-transition: none;
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(400px);
-webkit-transition: none;
}
#-moz-keyframes bounce {
from {
-moz-transform: translate(0px);
-moz-animation-timing-function: ease-in;
}
60% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
73% {
-moz-transform: translate(360px);
-moz-animation-timing-function: ease-in;
}
86% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
93% {
-moz-transform: translate(380px);
-moz-animation-timing-function: ease-in;
}
to {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
}
#-webkit-keyframes bounce {
from {
-webkit-transform: translate(0px);
-webkit-animation-timing-function: ease-in;
}
60% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
73% {
-webkit-transform: translate(360px);
-webkit-animation-timing-function: ease-in;
}
86% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
93% {
-webkit-transform: translate(380px);
-webkit-animation-timing-function: ease-in;
}
to {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<img id="anim" src="http://hacks.mozilla.org/wp-content/uploads/2011/04/75px-Aurora210.png" width="75" height="75" />
See Mozilla Developer Network for more details and browser compatibility.

Yes, it is possible using native javascript. Take a look at this document
Note, I'm linking to the "easeOut" section, since I think that represents a ball's bouncing a little better than their "bounce".
Here's a good example, further down the same page.