slider jquery class not being applied until too late

slider jquery class not being applied until too late - javascript

so simply put ... the simple slider you use the right arrow to go to the next slide and it should immediately apply a class called bounceInUp .... it does this but not until about 1 second after so you have static text , then the effect and I just want to have the text effect from slide start, ...nothing seems to rectify the problem...
I think it may pertain to the transitionend not actually ending until the next slide so was thinking maybe an onclick event for the button itself but i am not sure how to do that...
anyway here is a jsfiddle enter link description here
and here is the jquery , (all is included in the fiddle)
the main jquery code
$(document).ready(function() {
//Store a ref to slides
var $slides = $(".slides");
//Bind event to the contianed that gets animated
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// Remove classes from all the elements within the active container that starts with the class 'add-anim'
$slides.find(".slide-container [class^='add-anin']").removeClass("animated bounceInUp");
//Add appropriate classes to the matched elements within the active container
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-up-late").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft");
});
});

The button click event is where its at.
You will need to style it the way you want it but I think it does what you want.
Fiddle:http://jsfiddle.net/3hr4ua79/
$(document).ready(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active animated bounceInUp');
} else {
$('.oldActive').next().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active animated bounceInUp');
} else {
$('.oldActive').prev().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
#slider-wrapper {
width: 100%;
height: 200px;
}
#slider {
width: 100%;
height: 200px;
position: relative;
}
.sp {
width: 100%;
height: 200px;
position: absolute;
}
#nav {
margin-top: 20px;
width: 100%;
}
#button-previous {
position: relative;
top: -100px;
}
#button-next {
position: relative;
top: -100px;
float: right;
}
body {
overflow: hidden;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;">akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<input type="button" id="button-previous" value="Previous">
<input type="button" id="button-next" value="Next">

Related

Animation delay with html/css/js animation

I have an animation which makes text change by sliding vertically (similar to the one on groupebouchersports.com's homepage). The problem is, I want the text to stop longer (delay) before sliding out, but I cant seem to find how to do it. Here is my html / css / javascript code. Thanks in advance.
document.addEventListener('DOMContentLoaded', initTextAnimSlider);
function initTextAnimSlider() {
var textAnimHolder = document.querySelector('[data-words]');
var textAnimItem = document.querySelectorAll('.text-anim-item');
var textAnimItems = document.querySelector('.text-anim-items');
var animIn = 'anim-in';
var animOut = 'anim-out';
var lineActiveClass = 'line-active';
var animNextItem = null;
var animPrevItem = null;
var animFirstLoad = false;
var animDuration = textAnimHolder.getAttribute('data-delay');
var animCounter = 0;
var setTimeAnim;
var setTimeAnimResize;
animFunc();
getHolderWidth();
function animFunc() {
clearTimeout(setTimeAnim);
setTimeAnim = setTimeout(function () {
animFirstLoad = true;
if (animPrevItem !== null) {
animPrevItem.classList.add(animOut);
}
animNextItem = textAnimItems.children[animCounter];
animNextItem.classList.remove(animOut);
animNextItem.classList.add(animIn);
animPrevItem = animNextItem;
if (animCounter === textAnimItem.length - 1) {
animCounter = 0;
} else {
animCounter++;
}
animFunc();
}, animFirstLoad ? animDuration : 100);
}
function getHolderWidth() {
var itemsWidth = [];
for(var i =0; i < textAnimItem.length; i++) {
itemsWidth.push(textAnimItem[i].clientWidth);
console.log(textAnimItem[i].clientWidth);
}
textAnimHolder.style.width = '450px';
}
function resizeHandler() {
clearTimeout(setTimeAnim);
clearTimeout(setTimeAnimResize);
getHolderWidth();
setTimeAnimResize = setTimeout(function() {
animFunc();
}, 50);
}
window.addEventListener('resize', resizeHandler);
window.addEventListener('orientationchange', resizeHandler);
}
.text-anim-item {
white-space: nowrap;
position: absolute;
left: 0;
right:auto;
bottom: 0;
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
.text-anim-item.anim-in {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
-webkit-animation: textAnimIn .6s .3s forwards;
animation: textAnimIn .6s .3s forwards;
}
.text-anim-item.anim-out {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
-webkit-animation: textAnimOut .6s .3s forwards;
animation: textAnimOut .6s .3s forwards;
}
#-webkit-keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#-webkit-keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#-webkit-keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#-webkit-keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
#keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
<section class="bg-img intro-module">
<div class="block-center">
<div class="block-caption py-4 text-center text-md-left">
<h1 style="text-align:left;" class="display-1 mb-0">
<u class="mb-0" data-delay="1200" data-words>
<span style="text-align:left;" class="text-anim-items">
<span class="text-anim-item"><span>text</span></span>
<span class="text-anim-item"><span>text 2</span></span>
<span class="text-anim-item"><span>text 3</span></span>
</span>
<span class="anim-line"></span>
</u>
<br>
<span>lorem</span>
<br>
<span>ipsum</span>
<br>
<br>
<span><p>caption text</p></span>
</h1>
</div>
</div>
</section>

Adding a snippet to explain what I was referring to in the comments. The block id is only to have something for the text to hide behind as I think your intention is to have them scroll off screen.
span {
position: absolute;
left: 0;
right:auto;
top: 0;
font-size: 15pt;
}
#block {
position:absolute;
top: 100px;
left:0;
width: 300px;
height: 300px;
background: white;
}
#one {
animation: move 6s linear infinite;
color: red;
}
#two {
animation: move 6s linear -2s infinite;
color: blue;
}
#three {
animation: move 6s linear -4s infinite;
color: green;
}
#keyframes move {
0% {transform: translate(0, 0)}
33% {transform: translate(0, 0)}
66% {transform: translate(0, 200px)}
100% {transform: translate(0, 200px)}
}
<span id="one">Hello World</span>
<span id="two">World Hello</span>
<span id="three">No No No</span>
<div id="block"></div>

Fading element in the center of window by scrolling

I use a script in which elements fade in from the left and right as soon as the respective element has been scrolled completely into view. The problem is, the fade-in remains until the element has completely disappeared from the field of view. I try to implement it in such a way that it fades out as soon as it is no longer completely in sight. Otherwise, all elements are shown at the same time when scrolling.
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), false);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 300px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>

Use the deltaY attribute in the wheel event to detect scrolling up vs down.
window.onwheel = function(event) {
let div = document.querySelector('div');
let opacity = getComputedStyle(div).opacity;
(event.deltaY <= 0) ? (div.style.opacity = +opacity-0.1) : (div.style.opacity = +opacity+0.1);
document.querySelector('p').innerHTML = 'deltaY: ' + event.deltaY;
};
div {
position: absolute;
top: 50%;
left: 50%;
height: 10em;
width: 10em;
transform: translate(-50%,-50%);
border-radius: 50%;
background: black;
transition: opacity 0.2s;
}
<div></div>
<p>deltaY: 0</p>
To try the example above, enter the full page mode for the snippet. Otherwise it will work, but still scroll on the page causing a not ideal effect. Scroll up for a higher opacity and scroll down for a lower opacity.

You can use Animate On Scroll Library
Its easy to use and its more efficient, hope this helped you

I've updated your code, will need some major cleanup but it demonstrates the solution: (i've changed the #loc containers height to 150px to make my solution reproducable in the small 'run code' preview here)
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), true);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 150px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.fadedbox{
transition:all 1s;
transform:translateX(-100%);
}
#locations-mobile>div:nth-child(even)>.fadedbox{
transform:translateX(100%);
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.old_fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
.fadeInRight{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.old_fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
.fadeInLeft{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>
Most relevant change is switching from css animations to css transitions, making it easier to fade elements in once the are fully in view, and out once they leave.
Come back to me in case you need further explanation here.

Why does the last frame show up before first in animation?

I was trying to make a "bounce-in" effect where the circle isn't there before the animation, then the animation is executed on scroll, and the circle remains there after the animation is over. But for some reason it's there even before the animation, then disappears (since first frame opacity is 0) then appears again. I'm not sure what I'm doing wrong.
if (browser.canUse('transition')) {
var on = function() {
// Circles
$('.circle')
.scrollex({
mode: 'bottom',
delay: 50,
initialize: function() {
$(this).addClass('bounceIn');
},
terminate: function() {
$(this).removeClass('bounceIn');
},
enter: function() {
$(this).removeClass('bounceIn');
},
leave: function() {
$(this).addClass('bounceIn');
}
});
.circle {
position: absolute;
border-radius: 50%;
}
.circle.circle1 {
top: 80px;
left: 120px;
width: 100px;
height: 100px;
background: white;
opacity: 0;
}
/* ----------- BOUNCE IN ------------*/
#-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<div class="circle circle1"></div>

Slide element in when opening page, and slide it out when closing page

I went through dozens of questions here, but nothing answers my problem.
Basically I want to have the same feature as on this website: http://madebyheart.co.uk/work/thrively/ - when you load the page the [X] and MENU buttons slide from top, and when you click [X] to close the page they slide back up...
I tried looking at their code but it gives me headache.
I assume that's done with CSS + JS, but I have no clue where to start.

Check this out.
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.site__title.mega {
text-align: center;
font-size: 60px;
}
.ji:hover {
cursor: pointer;
}
.ji {
padding: 2px 14px;
border: 1px solid black;
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ji").click(function(){
$("#animationSandbox").removeClass("fadeInDown");
$("#animationSandbox").addClass("fadeInUp");
});
});
</script>
</head>
<body>
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
<h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>
EDIT:
For achieving fadein animation with display:inline-block; , you have to use fadein classes in inner divs as shown below.
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
body {
background: #f9f9f9;
margin: 0;
}
a {
text-decoration:underline;
color:#000;
position: relative;
}
/* ABOUT + CONTACT */
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 15px;
display: inline;
color: #000;
font-size: 13px;
}
.hlinks2 {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 100px;
display: inline;
color: #000;
font-size: 13px;
}
<span style="display: inline-block;" >
<div id="animationSandbox" class="hlinks fadeInLeft animated">
<span>
ABOUT —
CONTACT
</span>
</div>
</span>

animate.css is good library , Should meet your needs
DEMO:
https://daneden.github.io/animate.css/

How to create the following effect in jquery or javascript

I want to create an effect in jquery/ javascript so that the play button in the image grows to some size then shrinks back suddenly with a bouncy/pulsating effect.

This can be done easily with CSS3 animations.
HTML:
<div class="container">
<div class="myButton">
<a class="myButton">
<img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
</a>
</div>
</div>
CSS for growing and shrinkin object:
.container {
width: 100%;
padding: 100px;
text-align: center;
}
#-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}
#keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}
.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}
jsFiddle
CSS for bounce effect before shrinking to original size:
.container {
width: 100%;
padding: 100px;
text-align: center;
}
#-webkit-keyframes zoomout {
50% {
-webkit-transform: scale3d(1, 1, 1);
}
65% {
-webkit-transform: scale3d(1.2, 1.2, 1.2);
}
75% {
-webkit-transform: scale3d(1.35, 1.35, 1.35);
}
80% {
-webkit-transform: scale3d(1.35, 1.35, 1.35);
}
95% {
-webkit-transform: scale3d(.8, .8, .8);
}
}
#keyframes zoomout {
50% {
transform: scale3d(1, 1, 1);
}
65% {
transform: scale3d(1.2, 1.2, 1.2);
}
75% {
transform: scale3d(1.35, 1.35, 1.35);
}
80% {
transform: scale3d(1.35, 1.35, 1.35);
}
95% {
transform: scale3d(.8, .8, .8);
}
}
.myButton:hover {
-webkit-animation: zoomout 1.5s;
animation: zoomout 1.5s;
}
jsFiddle for bounce CSS
You can tweak the scale and animation to your taste. :)

We Keep Coding

JavaScript is the programming language of the Web.

slider jquery class not being applied until too late - javascript

Related

Animation delay with html/css/js animation

Fading element in the center of window by scrolling

Why does the last frame show up before first in animation?

Slide element in when opening page, and slide it out when closing page

How to create the following effect in jquery or javascript

Categories

Resources