We Keep Coding

fire animation onclick instead of hover

how will i add the flip animation to a button. The + button on the frontside instead of flipping on hover could be a start.
https://bootsnipp.com/snippets/92xNm
i understand that the animation comes from the
.image-flip:hover .backside,
.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
but how could i add this to a click event instead?
im using C# blazor if it changes anything.

Can't you use :active?
I think the better way is to use JS onclick and add/remove class to it.

Animation loop - css

Hello I've created simple infinite animation using css, but there are a simple problem that I need the animation is loop for ever smoothly.
.rotate{
width:200px;
height:200px;
margin:50px auto;
background-color:#00e95a;
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:both;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate">
</div>

Just add animation-timing-function: linear;.
Note: The problem was caused by the default timing state, which is ease.
.rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00e95a;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate"></div>

As #Kind user has mentioned you should hard reset animation-timing-function to linear, because the intial value of animation-timing-function is ease.
reference: https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function

Javascript overlay whilst everything loads in background

So i'm a little new to rails and javascript,
I love the look of this, http://codepen.io/msisto/pen/LntJe
Heres the codepen code:
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However i'm not sure how i can get this into my application. I'm wanting to have it so that this spins before each page loads.
Any ideas what i can do? any gems for this or?

Rails 4+ comes with Turbolinks gem.
You use this events to show/hide the loading before page loads.

Position Div On Top of Background Image ( covered / repsonsive )

I'm trying to position multiple divs on top of a background image so it makes a cool effect. The main issue is that the website is responsive and so is the image - it's background-size: cover which makes it hard to keep the overlays exactly where they need to be when viewing larger / smaller screens. I've created a crude JSFiddle to show what I mean. In this example I'm am trying to just overlay the animated boxes over the Koala's eyes.
I'm not sure if it's easier to get the coords of where I want the overlays to be and work with that or if I need to work with the window offset. Since it's also centered and when zoomed out it changes position-y and I'm unsure how to even track that being a background image.
Really what I'm hoping for is to get some insight on how to track the exact position of coords on this background image or point me in different direction to solve this issue.
#koala { background: url( 'http://i.imgur.com/1xZ17bk.jpg' ) no-repeat center; background-size: cover; position: relative; width: 100%; height: 768px; }
#leftEye,
#rightEye { width: 20px; height: 20px; background-color: #F00; position: absolute;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
#leftEye { top: 48%; left: 37%; }
#rightEye { top: 59%; right: 35%; }
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.notneeded { width: 100%; height: 50px; background-color: beige; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="notneeded"></div>
<div id="koala">
<div id="leftEye"></div>
<div id="rightEye"></div>
</div>
<div id="footer" class="notneeded"></div>

A much simpler solution is to use the window width changes to your advantage. So, ordinarily, you would measure the changes in your window sizes and subtract that from the eye's current position. However, because your background is centered, you need to alter that slightly - take the old window position, subtract the new window position and divide the result by two.
I've done this with jQuery.
var leftEye = $('#leftEye');
var rightEye = $('#rightEye');
var oldLeftEyePos = leftEye.position().left;
var oldRightEyePos = rightEye.position().left;
var oldWindowWidth = $(window).width();
$(window).resize(function(){
var newWindowWidth = $(window).width();
leftEye.css({
left: oldLeftEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
rightEye.css({
left: oldRightEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
});
Here's an updated jsfiddle with an example;
http://jsfiddle.net/joe5hjr3/10/
Disclaimer: This isn't perfect. It shrinks great, but as you go above a certain size, they start to close in on eachother - but hopefully, this is enough to get you on the right track. Also, it does not work great for zooming out, but works fine for zooming in.

Since you asked for pointing in a direction this is what I would try:
If the #koala-divs height is fixed 768px and width responsive 100% I would try to work with:
background-size: 100% auto;
background-position: center;
I guess now you could calculate the position for the rotating divs relative to the #koala-divs width and the proportion of the background-image.
X-coordinates should be easy once you know the x-coordinates of the eyes relative in the image (for e.g. 40% left and 60% right)
Y-coordinates are a bit trickier I assume. Lets say your image is sized 1200 x 800. Its proportion is 3:2 (12:8 -> 6:4 -> 3:2).
Now you could get the total width of the #koala-div with jquery/javascript and multiply it with 0,666666666666666666666666 (two thirds) to get the actual height of the background image.
From there you can derive the y-coordinates similar to the way i proposed for the x-coordinates. But you need to imagine it to be verticaly cut in half and position in relatively in each half.
I don't know if you can follow my thoughs or even if they are useful. Since I got not enough time today I hope this helps nevertheless...
Have a nice Tuesday!
edit/note:
The image will just cover the div as long as the div is at least as wide as the image... If it gets to small/narrow you will get empty space above and below the image.

How to put an animation in x and y coordinates object on the onclick function in Javascript?

How to put an animation in x and y coordinates object on the onclick function in Javascript?
http://codepen.io/plas05/pen/OVeeLv

Hi man here is a solution : https://jsfiddle.net/leojavier/4f5z3c62/
Use css animation instead, since the GPU takes care of your CSS animation, is less likely to have flickering... is better for performace...
function CreateDiv(elm, id, bgcolor, w, h) {
var elm = document.createElement(elm);
elm.id = id;
elm.style.backgroundColor = bgcolor;
elm.style.width = w;
elm.style.height = h;
this.postXY = function(pos, posX, posY) {
elm.style.position = pos;
elm.style.left = posX;
elm.style.top = posY;
};
document.getElementsByTagName('body')[0].appendChild(elm);
};
var b1 = new CreateDiv('div', 'box', '#999', '50px', '50px'),
bx = document.getElementById("box"),
bt = document.body.offsetHeight / 2 +"px",
bl = document.body.offsetWidth / 2 +"px";
b1.postXY('absolute', bl, bt);
this.onclick= function(e) {
Move(e);
};
function Move(evt) {
console.log(evt.target)
evt.target.className = "move"
};
CSS
#box {
display:block;
font-size:12px;
line-height:19px;
cursor:pointer;
}
.move {
-moz-animation: animation 0.4s;
-o-animation: animation 0.4s;
-webkit-animation: animation 0.4s;
animation: animation 0.4s;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
#-moz-keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
#-webkit-keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
https://jsfiddle.net/leojavier/4f5z3c62/

Just add a transition to the box. Forked demo
transition: all 0.3s;