I have problem with finding the right position of click. I want to make google material design - ripple effect on clicked button. Circle need to be on button not somewhere else. So when you click on button white circle is showing somewhere else not above the wanted button. Where is the mistake i made?
$(function () {
var btnClick, bWidth, bHeight, x, y, posX, posY,d;
$(".btn").click(function (e) {
e.preventDefault();
posX = $(this).offset().left;
posY = $(this).offset().top;
bWidth = $(this).outerWidth();
bHeight = $(this).outerHeight();
d = Math.max(bWidth, bHeight);
$(".btn-over").remove();
if ($(this).find(".btn-over").length === 0) {
$(this).prepend("<span class='btn-over'></span>");
}
// btnClick = $(this).children(".btn-over");
// btnClick.removeClass("animation");
// if (!btnClick.height() && !btnClick.width()) {
// d = Math.max($(this).outerWidth(), $(this).outerHeight());
// btnClick.css({
// height: d,
// width: d
// });
// }
x = e.pageX - posX - bWidth / 2;
y = e.pageY - posY - bHeight /2;
$(".btn-over").css({
width: d,
height: d,
top: y + 'px',
left: x + 'px'
}).addClass("animation");
});
});
nav {
height: 3rem;
background-color: #424242;
color: #fff; }
.menu {
list-style: none;
float: right; }
.menu li {
display: inline-block; }
.btn-sigup {
box-shadow: none;
background-color: #4CAF50; }
.btn-sigup:hover {
background-color: #66BB6A;
box-shadow: none; }
.btn-login {
box-shadow: none;
background-color: transparent; }
.btn-login:hover {
box-shadow: none;
background-color: transparent; }
.btn-over {
display: inline-block;
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0); }
.animation {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-ms-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear; }
#-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5); } }
#-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5); } }
#-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5); } }
#keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header>
<nav>
<ul class="menu">
<li>
<button class="btn btn-login">LOG IN</button>
</li>
<li>
<button class="btn btn-sigup">SING UP</button>
</li>
</ul>
</nav>
</header>
There's nothing wrong with your JavaScript, you just need to set the position of the buttons to relative so that the positioning of the .btn-over span is contained within them. You should also consider setting the overflow of the buttons to hidden so that the "ripple" doesn't spill out of them.
$(function(){
var btnClick,bWidth,bHeight,x,y,posX,posY,d;
$(".btn").click(function(e){
e.preventDefault();
posX=$(this).offset().left;
posY=$(this).offset().top;
bWidth=$(this).outerWidth();
bHeight=$(this).outerHeight();
d=Math.max(bWidth,bHeight);
$(".btn-over").remove();
if($(this).find(".btn-over").length===0)
$(this).prepend("<span class=\"btn-over\"></span>");
x=e.pageX-posX-bWidth/2;
y=e.pageY-posY-bHeight/2;
$(".btn-over").css({
width:d+"px",
height:d+"px",
top:y+"px",
left:x+"px"
}).addClass("animation");
});
});
nav{
background-color:#424242;
color:#fff;
height:3rem;
}
.menu{
float:right;
list-style:none;
}
.menu li{
display:inline-block;
}
.btn-sigup{
background-color:#4CAF50;
overflow:hidden;
position:relative;
}
.btn-sigup:hover{
background-color:#66BB6A;
}
.btn-login{
background-color:transparent;
overflow:hidden;
position:relative;
}
.btn-over{
background:rgba(255, 255, 255, 0.3);
border-radius:50%;
display:inline-block;
position:absolute;
transform:scale(0);
}
.animation{
animation:ripple .65s linear;
}
#keyframes ripple{
to{
opacity:0;
transform:scale(2.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="menu">
<li>
<button class="btn btn-login">LOG IN</button>
</li>
<li>
<button class="btn btn-sigup">SING UP</button>
</li>
</ul>
</nav>
</header>
And here' an alternative implementation, with some extra features, that you can use on any element you wish. To implement it, you'll need to copy the JavaSript and the important stuff from the CSS and then you just give any element you want to apply this effect to a data-ripple-color attribute, which takes a value of any valid CSS color.
To apply this effect to an element every time it is clicked without waiting for the previous animation to complete add a data-ripple-multiple attribute to it with a value of true. See the button element below for an example.
(function(){
if(document.querySelector("[data-ripple-color]")){
var span=document.createElement("span");
span.classList.add("ripple");
document.addEventListener("click",function(event){
var target=event.target,color,data,multi,node,style;
while(!target.dataset.rippleColor&&target!==document.body)
target=target.parentNode;
data=target.dataset;
multi=data.rippleMultiple;
if((color=data.rippleColor)&&(multi||!data.rippleWait)){
if(!multi)data.rippleWait="true";
target.appendChild(node=span.cloneNode(0));
style=node.style;
style.background=color;
style.height=style.width=Math.min(target.offsetHeight,target.offsetWidth)+"px";
style.left=event.pageX-target.offsetLeft+"px";
style.top=event.pageY-target.offsetTop+"px";
setTimeout(function(){
target.removeChild(node);
if(!multi)delete data.rippleWait;
},750);
}
},0);
}
})();
/* Housekeeping */#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);*,*::before,*::after{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:none;background-clip:padding-box;border:0;border-radius:0;box-sizing:border-box;color:rgba(0,0,0,.87);font-family:Roboto,arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:500;line-height:1.2em;list-style:none;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:left;text-decoration:none;text-indent:0;text-rendering:auto;transition-duration:.2s;transition-property:none;transition-timing-function:cubic-bezier(.4,0,.2,1);}*>*{font-size:inherit;font-style:inherit;font-weight:inherit;}*>*,*::before,*::after{color:inherit;font-family:inherit;line-height:inherit;}
/* The important stuff */
[data-ripple-color]{
overflow:hidden;
position:relative;
}
.ripple{
animation:ripple 1s cubic-bezier(.4,0,.2,1);
border-radius:50%;
display:block;
opacity:0;
position:absolute;
}
#keyframes ripple{
from{
transform:translate(-50%,-50%) scale(1);
opacity:.54;
}to{
transform:translate(-50%,-50%) scale(54);
opacity:0;
}
}
/* Fiddle styles */
a[data-ripple-color],button[data-ripple-color]{
border-radius:3px;
cursor:pointer;
display:block;
font-size:24px;
font-weight:500;
line-height:40px;
margin:0 auto 8px;
padding:8px;
text-align:center;
width:200px;
}
a[data-ripple-color]{
background:#F44336;
color:#fff;
}
button[data-ripple-color]{
background:#3f51b5;
color:#fff;
font-size:24px;
line-height:40px;
padding:8px;
text-align:center;
text-transform:uppercase;
width:200px;
}
figure[data-ripple-color]{
border-radius:3px;
margin:0 auto 8px;
width:200px;
}
p[data-ripple-color]{
line-height:20px;
margin:0 8px 8px;
padding:8px;
}
<button data-ripple-color="#fff" data-ripple-multiple="true">Button</button>
<a data-ripple-color="#303f9f">Link</a>
<figure data-ripple-color="rgb(0,0,0)"><img src="http://placehold.it/200x200.png/e0e0e0?text=Image+%0A+Parent"></figure>
<p data-ripple-color="#616161">Paragrpah</p>
Related
Everytime I try to change the navigation bar, it loads a page and for a split second on top there is a white bar, and then it goes away. How do I get rid of this blackbar
I have put it in below link, you can see it is not working properly, I see differences in also different browser
https://stackblitz.com/edit/web-platform-zgajud?file=index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- <link rel = "stylesheet" href = "navigation.css" type = "text / css" /> -->
</head>
<body>
<!-- <script type="text/javascript">
$.get("navigation.html", function (data) {
$("#nav-placeholder").replaceWith(data);
});
</script> -->
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("navigation.html");
});
</script>
<p class="lead">body1</p>
</body>
</html>
navigation.css
.hoverable {
display: inline-block;
/* backface-visibility: hidden; */
vertical-align: middle;
position: relative;
/* box-shadow: 0 0 1px rgba(41, 121, 107, 0.452); */
/* transform: translateZ(0); */
/* transition-duration: 0.3s; */
/* transition-property: transform; */
}
.hoverable:before {
position: absolute;
pointer-events: none;
/* z-index: -1; */
content: "";
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: .6;
/* background: -webkit-radial-gradient(center, ellipse, rgba(167, 58, 58, 0.35) 80%, rgba(54, 138, 46, 0.39) 80%); */
/* background: radial-gradient(ellipse at center, rgba(40, 80, 190, 0.35) 80%, rgba(255, 255, 255, 0) 80%); */
/* W3C */
transition-duration: 0.3s;
/* transition-property: transform, opacity; */
}
.hoverable:hover, .hoverable:active, .hoverable:focus {
transform: translateY(-5px);
/* opacity: .9 !important; */
color: black;
}
.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before {
/* opacity: 1; */
transform: translateY(0px);
}
#keyframes bounce-animation {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.bounce {
animation-name: bounce-animation;
animation-duration: 2s;
}
/*everything below here is just setting up the page, so dont worry about it */
#media (min-width: 768px) {
.navbar {
text-align: center !important;
float: none;
display: inline-block;
border-color: transparent;
/* border-bottom:2px solid rgba(0,0,0,.5); */
}
}
body {
/* background-color: black; */
font-weight: 600;
text-align: center !important;
/* color: white; */
}
nav {
background: none !important;
/* background-color: transparent; */
text-transform: uppercase;
}
nav li {
margin-left: 3em;
margin-right: 3em;
}
nav li a {
transition: 0s color ease-in-out;
color: black !important;
}
.page-title {
opacity: 1.0 !important;
}
navigation.html
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<link rel = "stylesheet" href = "navigationoriginal.css" type = "text / css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "navigation.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a id="len1" class="hoverable" href="index.html">Home</a></li>
<li><a id="len2" class="hoverable" href="body2.html">About</a></li>
<li><a id="len3" class="hoverable" href="#">Portfolio</a></li>
<li><a id="len4" class="hoverable" href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- <div id="what-the-hell-is-this">
<div class="page-title">
<h2>Simple Navigation</h2>
<p class="lead">
Based on Hover.css, the goal of this pen
is to create a simple navigation bar <br />
that can be easily reused in both mobile and native displays. Mouse over the nav text for animation!
</p>
</div>
</div> -->
</div>
Most likely it's because you're using bootstrap pre-defined CSS elements and then overwriting them when your header loads. Specifically the class navbar-inverse, which paints your nav element black. You don't need this because you're not actually using it.
Other contributions to the flicker: You're loading a bunch of heavy dependencies in navigation.html - those all take some time to download. Not to mention that you're downloading the jQuery library AGAIN in that file (it's already loaded in index.html).
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Remove these 2 tags from navigation.html and move them to index.html. Then decide which jQuery script you want to use (since you have a different one with a different version already in index.html).
You can leave the navigation.js and navigation.css tags in the navigation.html if you want.
It may be because you styled all nav elements black here:
nav li a {
transition: 0s color ease-in-out;
color: black !important;
}
This would make the children on the nav element black when navigation.html is imported.
I'm using below script to show loading gif while the file is ready to download and then Once it is done , it hides after couple of seconds.
But I Only want to dowanload the file once, but when I click the link it download the same file twice. I found the code somewhere in forums, so I really don't know how to prevent it from running the url twice.
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
setTimeout(function() {
clickedLink.html(originalHtml);
window.location = destination;
},2500);
$('<iframe>').hide().appendTo('body').load(function() {
window.location =sagar;
}).attr('sagar', sagar);
});
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: darkblue;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; ">
<ol class="tree">
<li>
<label for="folder1">First Semester</label> <input type="checkbox" id="folder1" />
<ol>
<li>
<label for="subfolder11">Classical Mechanics </label> <input type="checkbox" id="subfolder11" />
<ol>
<li class="file">Solutions_to_Problems_in_Goldstein)</li>
<li class="file">Goldstein Solution Chapter 8 Soln</li>
<li class="file">Goldstein Chapter 9 Soln</li>
<li class="file">Numericals Jacobi Angle ( Hints )</li>
<li class="file">Angle Jacobi Numericals ( Complete Solution)</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
Any help would be really appreciated.
It seems you are calling window.location = destination; (which is triggering the browser to download the file) twice, inside that setTimeout function and after a hidden iframe is loaded, which I think is the correct place.
Just stop calling setTimeout like below:
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
$('<iframe>').hide().appendTo('body').load(function() {
window.location = destination;
clickedLink.html(originalHtml);
}).attr('src', destination);
});
I have 2 elements that overlap each other, on hover I want to animate the bottom element out to the right and then move back left but on top of the other element, on mouseleave I then want it to animate back to its default state. I've got something working only the opacity issue is making it quite buggy and not as smooth as I'd have liked...
https://codepen.io/liamgallagher/pen/vWrYOe?editors=1100
CSS
body {
background:#cacaca;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
}
}
}
#keyframes moveFront {
0% { right:25%; }
50% {z-index:3; right:0;}
100% { opacity: 1; right:25%;}
}
HTML
<div class="sector-card">
<div class="sector-panel sector-panel__information">
<h2>Big Data</h2>
<p>Lorem ipsum oosh</p>
</div>
<div class="sector-panel sector-panel__study" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDvM3R_A9_W32EdH7pqK-CgCg9fSLcLoXi5EbV_D0CxtrJpXYn');">
<h2>case study</h2>
</div>
</div>
I forked your pen. I just added some more brekpoints to the animation and changed the css slightly on the hover event. I think this is what you want (link to forked pen and css below)
https://codepen.io/ecglover8/pen/qVKBxX
body {
background:#cacaca;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
z-index:3;
}
}
}
#keyframes moveFront {
0% { z-index:-1; right:25%; }
49% {z-index:-1;right:0;}
50% {z-index:3;right:0;}
100% {right:25%;}
}
Unfortunately, you can't transition z-index. One thing you can do is transition opacity to make it appear smoother.
Something like:
#keyframes moveFront {
0% { right:25%; opacity: 0; }
100% { right:0%;z-index:3; opacity: 1; }
}
Hope this helps!
Well, the CSS only solution i got was creating another animation that will play when the mouse leave. It does, obviously, an animation when you load the page but thats because it is a CSS only solution:
https://codepen.io/anon/pen/YEvPNB?editors=1100
I just copied the same animation and put the values on backwards.
#keyframes moveBack {
100% {
z-index: -1;
right: 25%;
top: 5%;
}
50% {
z-index: -1;
right: 0;
}
49% {
z-index: 3;
right: 0;
top: 10%;
}
0% {
z-index: 3;
right: 25%;
top: 5%;
}
}
And then i just put the naimation on your .sector-panel__study.
&__study {
background-size: cover;
z-index: 0;
position: absolute;
top: 5%;
right: 25%;
animation: moveBack 1s forwards; // HERE
}
Hope this helps.
Well I managed to do the back to position part but it becomes a bit buggy because there is not opposite to :hover, so this will execute when the div is created.
Changed this to the CSS:
body {
background:#cacaca;
}
.sector-panel__study{
opacity: 0.5;
animation:moveBack 2s backwards;
animation-fill-mode: forwards;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
animation-fill-mode: forwards;
}
.sector-panel__information {
opacity: 0.5;
z-index: 0;
}
}
}
#keyframes moveFront {
0% { right:25%; }
50% {z-index:3; right:0;}
100% { opacity: 1; right:25%;}
}
#keyframes moveBack {
0% { z-index: 3; Right:25%; opacity:1;}
50% {z-index:0; Right:0;}
100% { opacity: 0.5; Right:25%;}
}
Can put snipped, you will have to copy this css code and test!
I am struggling to get direction-aware hover and css transitions to work properly. Basically I am trying to have a grid of elements with a front and back face, and when on hover have a css transition to flip that element to show the back face.
Transition example (without direction-aware): fiddle
As you can see, no matter which way your mouse enters an element it always flips up. I want it to flip whichever way the mouse enters in/out.
Example:
And here is my attempt with direction-aware: fiddle
I am using jQuery to add classes relevant to the mouse in/out direction.
.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}
.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}
As you can see from the direction-aware example it kind of works but there are major glitches which I can't get my head round. (I've been overthinking this and my brain has just imploded.)
Anyway I hope this makes sense. Thanks.
I have a partial solution to your question.
But I needed to change some of the transitions to animations
$('.box-container .box').each(function() {
$(this).on('mouseenter mouseleave', function(e) {
var $this = $(this),
width = $this.width(),
height = $this.height();
var x = (e.pageX - $this.offset().left - (width / 2)) * (width > height ? (height / width) : 1),
y = (e.pageY - $this.offset().top - (height / 2)) * (height > width ? (width / height) : 1);
// top = 0, right = 1, bottom = 2, left = 3
var dir_num = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
directions = ['top', 'right', 'bottom', 'left'];
// If mouse enter
if (e.type === 'mouseenter') {
// Remove all hover out classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-out-\S+/g) || []).join(' ');
});
// Add in direction class
$this.addClass('hover-in-' + directions[dir_num]);
}
// If mouse leave
if (e.type === 'mouseleave') {
// Remove all hover in classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-in-\S+/g) || []).join(' ');
});
// Add out direction class
$this.addClass('hover-out-' + directions[dir_num]);
}
});
});
* {
box-sizing: border-box;
}
.box-container {
padding: 20px;
width: 600px;
}
.box-container:after {
content: '';
display: block;
clear: both;
}
.box-container .box {
float: left;
width: 50%;
height: 200px;
position: relative;
perspective: 600px;
border: 1px solid transparent;
}
.box-container .box .front, .box-container .box .back {
float: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all 1s ease-in-out;
color: white;
font-size: 60px;
}
.box-container .box .front {
background: blue;
transform: rotateX(0) rotateY(0);
z-index: 900;
}
.box-container .box .back {
background: red;
z-index: 800;
}
.box-container .box:hover .front {
z-index: 900;
}
.box-container .box:hover .back {
z-index: 1000;
transform: rotateX(180) rotateY(0);
}
.box-container .box.hover-in-top .front,
.box-container .box.hover-out-bottom .back {
transform: rotateX(-179deg) rotateY(0);
}
.box-container .box.hover-in-top .back,
.box-container .box.hover-out-bottom .front {
animation: Xminus 1s ease-in-out;
}
#keyframes Xminus {
from {transform: rotateX(179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-bottom .front,
.box-container .box.hover-out-top .back {
transform: rotateX(179deg);
}
.box-container .box.hover-in-bottom .back,
.box-container .box.hover-out-top .front {
animation: Xplus 1s ease-in-out;
}
#keyframes Xplus {
from {transform: rotateX(-179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-right .front,
.box-container .box.hover-out-left .back {
transform: rotateY(-179deg);
}
.box-container .box.hover-in-right .back,
.box-container .box.hover-out-left .front {
animation: Yminus 1s ease-in-out;
}
#keyframes Yminus {
from {transform: rotateX(0deg) rotateY(179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
.box-container .box.hover-in-left .front,
.box-container .box.hover-out-right .back {
transform: rotateY(179deg);
}
.box-container .box.hover-in-left .back,
.box-container .box.hover-out-right .front {
animation: Yplus 1s ease-in-out;
}
#keyframes Yplus {
from {transform: rotateX(0deg) rotateY(-179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
</div>
The problem with animations if that if you leave the div before the animation has ended, the animation will break
But if move slowly, and stay on the divs until the animation ends, this will work ok.
I hope that somebody finds a better solution
I believe that the best way to approach the problem is not to use CSS transitions.
You can easily implement it using jQuery's animate, utilizing jQuery animations queue to keep all of your animations synced.
I modified your example to animate the transition in JavaScript.
Code example
I am facing problem to actually loading a fade in / out a div which has a css3 based login animation when a function loaded. I have the jsfiddle setup but I still can not make it work. Any help on it will be appreciated!
http://jsfiddle.net/adamchenwei/v4CK6/4/
HTML
<!DOCTYPE html>
<body>
<div class="loading">
<div class="loading_ball_outside"><div class="loading_inside"></div></div>
</div>
<div class="section play">
<h1>PLoad CSS 2 Anywhere--FAILED</h1>
<div class="play_content">
<button class="play_button" id="1">Play1</button>
<button class="play_button" id="1">Play2</button>
<button class="play_button" id="1">Play3</button>
<button class="play_button" id="1">Play4</button>
<p>Something in Play ...</p>
<div class="play_respond" >
<table class="play_respond" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div><!--class="play_content" END-->
</div><!--class="play" END-->
</body>
</html>
CSS
.loading_ball_inside {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.loading_ball_outside {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
.loading {
position: absolute;
/*left: 50%; /*the positioning you're looking for.*/
top: 50%; /* edit these values to give you*/
display: none;
}
#-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
#-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
#-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
JQuery
$(document).ready(function(){
//play_pickparentclass BEG
$(document).on('click','.play_button',function(){
loaderOn();
loaderOff();
});//play_pickparentclass END
function loaderOn(){
('.loading').fadeIn('slow');
};
function loaderOff(){
('.loading').fadeOut('slow');
};
});//$(document).ready(function() END
function loaderOn(){
$('.loading').fadeIn('slow');
}
function loaderOff(){
$('.loading').fadeOut('slow');
}
full code :
$(document).ready(function(){
function loaderOn(){
$('.loading').fadeIn('slow');
}
function loaderOff(){
$('.loading').fadeOut('slow');
}
//play_pickparentclass BEG
$(".play_button").click( function(){
loaderOn();
loaderOff();
});//play_pickparentclass END
});//$(document).ready(function() END
demo : http://jsfiddle.net/v4CK6/7/
you can use your console to check what is wrong
It's because you forgot to use jQuery :)
Try adding $ and it will work. Like so: http://jsfiddle.net/v4CK6/6/