Reverse animation on page transition

Reverse animation on page transition - javascript

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 ?

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.

¿How to create text slider animation?

I have developed an slide automatic, very simple indeed.
I would like to add animation effects to the text, as this examples:
Demo 1
Demo 2
could help with some example or step that I must follow to adapt the effects of animation in the slide
Code complete:
$(function() {
var SliderModule = (function() {
var pb = {};
//Defaul #slider > div
pb.el = $('#slider > .carousel');
pb.items = {
panel: pb.el
}
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;
// Initialize
pb.init = function(settings) {
this.settings = settings || {duration: 8000}
var output = '';
SliderInit();
for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<div class="active"></div>';
} else {
output += '<div></div>';
}
}
}
var SliderInit = function() {
$("#barra").animate({
width:"100%"
},
pb.settings.duration,
"linear",
pb.startSlider
);
}
pb.startSlider = function() {
$("#barra").css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}
controls.removeClass('active').eq(nextSlider).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');
currentSlider = nextSlider;
nextSlider += 1;
SliderInit();
}
var changePanel = function(id) {
$("#barra").stop().css("width", 0);
var panels = pb.items.panel,
controls = $('#slider-controls div');
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}
controls.removeClass('active').eq(id).addClass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');
currentSlider = id;
nextSlider = id+1;
SliderInit();
}
return pb;
}());
SliderModule.init({duration: 7000});
});
/*!
* #Design slider
*/
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.item {
width: 100%;
height: 548px !important;
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
}
.slider-container {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 100%;
background-color:#FFF;
}
.slider-wrapper {
z-index: 90;
width: 100%;
height: 500px;
position: relative;
}
.slider-wrapper > div {
display: none;
}
div.slide-current {
display: block;
}
.slider-wrapper div .item {
top: 0;
left: 0;
height: auto;
max-width: 100%;
position: absolute;
}
.slider-inner {
top: 0;
left: 0;
width: 100%;
color: #fff;
height: 100%;
position: absolute;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.carousel-content {
text-align: center;
}
#slider .slider-inner h2 {
margin-top: 180px;
font-size: 36px;
line-height: 1;
text-transform: uppercase;
color: #fff;
}
.btn {
cursor: pointer;
user-select: none;
text-align: center;
border-radius: 4px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
background-image: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#slider .slider-inner .btn {
font-size: 18px;
border-width: 0;
margin-top: 10px;
line-height: 1.33;
border-radius: 6px;
padding: 10px 16px;
background: #72C05B;
border-color: #72C05B;
}
#barra {
width: 0%;
z-index: 99;
height: 10px;
margin-top: 15px;
position: relative;
background: #00c5b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<div id="slider" class="slider-wrapper">
<div class="carousel slide-current">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg2.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 2</h2>
</div>
</div>
</div>
<div class="carousel">
<div class="item" style="background-image: url('http://themeinthebox.com/demo/color/images/slider/bg1.jpg');">
<div class="slider-inner">
<h2>Hello!!! How to create text animation 3</h2>
</div>
</div>
</div>
</div>
<div id="barra"></div>
</div>

For your text animation use this css it will help you to build you text animation. This will work for text/image and html elements also.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================
Made by NK Chaudhary
Questions, comments, concerns, love letters:
nkchaudhary13#gmail.com
==============================================
*/
/*
==============================================
slideDown
==============================================
*/
.logo{
height: 52px;
margin-top: -15px;
}
.logo:hover{
opacity:0.8;
transiftion:1s;
}
.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideUp
==============================================
*/
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideRight
==============================================
*/
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideExpandUp
==============================================
*/
.slideExpandUp{
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;
}
#keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}
#-webkit-keyframes slideExpandUp {
0% {
-webkit-transform: translateY(100%) scaleX(0.5);
}
30%{
-webkit-transform: translateY(-8%) scaleX(0.5);
}
40%{
-webkit-transform: translateY(2%) scaleX(0.5);
}
50%{
-webkit-transform: translateY(0%) scaleX(1.1);
}
60%{
-webkit-transform: translateY(0%) scaleX(0.9);
}
70% {
-webkit-transform: translateY(0%) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleX(0.95);
}
90% {
-webkit-transform: translateY(0%) scaleX(1.02);
}
100%{
-webkit-transform: translateY(0%) scaleX(1);
}
}
/*
==============================================
expandUp
==============================================
*/
.expandUp{
animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#keyframes expandUp {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
transform: translateY(-7%) scaleY(1.12);
}
75%{
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}
#-webkit-keyframes expandUp {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75%{
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
/*
==============================================
expandOpen
==============================================
*/
.expandOpen{
animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes expandOpen {
0% {
transform: scale(1.8);
}
50% {
transform: scale(0.95);
}
80% {
transform: scale(1.05);
}
90% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes expandOpen {
0% {
-webkit-transform: scale(1.8);
}
50% {
-webkit-transform: scale(0.95);
}
80% {
-webkit-transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
}
}
/*
==============================================
bigEntrance
==============================================
*/
.bigEntrance{
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
}
#keyframes bigEntrance {
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes bigEntrance {
0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
/*
==============================================
hatch
==============================================
*/
.hatch{
animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
#keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
#-webkit-keyframes hatch {
0% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
35% {
-webkit-transform: rotate(2deg) scaleY(1);
}
50% {
-webkit-transform: rotate(-2deg);
}
65% {
-webkit-transform: rotate(1deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
/*
==============================================
bounce
==============================================
*/
.bounce{
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60%{
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
/*
==============================================
pulse
==============================================
*/
.pulse{
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
/*
==============================================
floating
==============================================
*/
.floating{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*
==============================================
tossing
==============================================
*/
.tossing{
animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
#-webkit-keyframes tossing {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}
/*
==============================================
pullUp
==============================================
*/
.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);
}
}
/*
==============================================
pullDown
==============================================
*/
.pullDown{
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
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%;
}
#keyframes pullDown {
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 pullDown {
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);
}
}
/*
==============================================
stretchLeft
==============================================
*/
.stretchLeft{
animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
}
#keyframes stretchLeft {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchLeft {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
/*
==============================================
stretchRight
==============================================
*/
.stretchRight{
animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0.3);
}
40% {
transform: scaleX(1.02);
}
60% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(0.98);
}
80% {
transform: scaleX(1.01);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0.3);
}
40% {
-webkit-transform: scaleX(1.02);
}
60% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(0.98);
}
80% {
-webkit-transform: scaleX(1.01);
}
100% {
-webkit-transform: scaleX(1);
}
}
</style>
</head>
<body>
<div class="timeline-image pulse">
<h2 class="section-heading">My Amazing Team</h2>
</div>
</body>
</html>

Possible to reverse a css animation on class removal?

Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})

In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake

CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)

You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.

Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.

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.

Develop Reference

JavaScript is the programming language of the Web.

Reverse animation on page transition - javascript

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 ?

Related

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

¿How to create text slider animation?

Possible to reverse a css animation on class removal?

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

Create a bounce effect on hover

Categories

Resources