Create a bounce effect on hover

Create a bounce effect on hover - javascript

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.

Related

Why div animation keyframe is not working when javascript engine is busy?

I have page structure as bellow:
<head>
<style>
.windows8 {
position: relative;
width: 78px;
height:78px;
margin:auto;
margin-top: 200px;
}
.windows8 .wBall {
position: absolute;
width: 74px;
height: 74px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 6.96s infinite;
-o-animation: orbit 6.96s infinite;
-ms-animation: orbit 6.96s infinite;
-webkit-animation: orbit 6.96s infinite;
-moz-animation: orbit 6.96s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 10px;
height: 10px;
background: rgb(93, 147, 195);
left:0px;
top:0px;
border-radius: 10px;
}
.windows8 #1wBall_1,.windows8 #wBall_1 {
animation-delay: 1.52s;
-o-animation-delay: 1.52s;
-ms-animation-delay: 1.52s;
-webkit-animation-delay: 1.52s;
-moz-animation-delay: 1.52s;
}
.windows8 #1wBall_2,.windows8 #wBall_2 {
animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.windows8 #1wBall_3,.windows8 #wBall_3 {
animation-delay: 0.61s;
-o-animation-delay: 0.61s;
-ms-animation-delay: 0.61s;
-webkit-animation-delay: 0.61s;
-moz-animation-delay: 0.61s;
}
.windows8 #1wBall_4,.windows8 #wBall_4 {
animation-delay: 0.91s;
-o-animation-delay: 0.91s;
-ms-animation-delay: 0.91s;
-webkit-animation-delay: 0.91s;
-moz-animation-delay: 0.91s;
}
.windows8 #1wBall_5,.windows8 #wBall_5 {
animation-delay: 1.22s;
-o-animation-delay: 1.22s;
-ms-animation-delay: 1.22s;
-webkit-animation-delay: 1.22s;
-moz-animation-delay: 1.22s;
}
#keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
#-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
#-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
#-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
#-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}
30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}
76% {
opacity: 0;
-moz-transform:rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
</style>
<!-- 4-5 style links-->
<!-- 4-5 scripts -->
<!-- for testing you can put following code
for(var i=0;i<-1;i++){console.log(i)}
-->
</head>
<body>
<app>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
</app>
</body>
It renders the divs with all its css(e.g ball radius and background-color etc.) but key-frame(i.e. transition/movement) of ball are not working upto some time (until all css/js is downloded and parsed) but after that it works fine.
I thought may be while loading and parsing css/js the rendering engine will be busy so it can't execute transition but when I took a look on other web-pages they uses css loaders as I do and it is working fine. So how their animation is working when mine not.

Because browser tabs are single threaded. Some browsers are single threaded, entirely.
If the JavaScript never stops running in some browsers you can’t even close the tab.
If you want the DOM to repaint, or canvas to animate, or the page to be clickable, you can not lock JS up. Which means that you have to learn different programming paradigms to break up long-running processes.

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 ?

CSS fan animation

I have three different image to which I want to apply a fan like animation.
I cant club the images in Photoshop as I want the images to appear one after the other.
This is the code (I have used dummy images in the code)
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
-ms-transform: rotate(300deg); /* IE 9 */
-webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 30% 100%;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>
This is the fiddle: http://jsfiddle.net/wzht89r3/2/
Solution can also be in jquery or javascript.

Something like this? I just changed the transform-origin of your .windmill rule.
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 220px 150px;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

Personally I would get rid of those additional classes and use the :nth-child pseudo class. Having each child with it's own offset (for example: top:150px; left:135px;) would mean that you would have to recalculate the positioning every time you change the image, so I removed them and found another way of positioning.
I used different images as they were facing the wrong direction. For this to work the arrow must be facing the rotation origin, in this case 0 0 or top-left.
To condense the answer I removed all vendor prefixes and the fade in transitions.
#windmill {
animation: spin-clockwise 2s linear 1200ms infinite;
transform-origin: 0 0;
position: relative;
top: 100px; /*Image dimensions*/
left: 100px;
}
#windmill > * {
position: absolute;
transform-origin: 0 0;
}
#windmill > *:nth-child(1) {transform: rotate(0deg);}
#windmill > *:nth-child(2) {transform: rotate(120deg);}
#windmill > *:nth-child(3) {transform: rotate(240deg);}
#keyframes spin-clockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div id="windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
</div>

using an onClick event to trigger a CSS3 transition

I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!

Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the 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

Develop Reference

JavaScript is the programming language of the Web.

Create a bounce effect on hover - javascript

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.

Related

Why div animation keyframe is not working when javascript engine is busy?

Reverse animation on page transition

CSS fan animation

using an onClick event to trigger a CSS3 transition

Firefox will not update changes to CSS Animation

Categories

Resources