Problems implementing #keyframes CSS animation

Problems implementing #keyframes CSS animation - javascript

Here is how I call the animation:
playerHand.style.animation = "shakePlayer 1.5s ease";
computerHand.style.animation = "shakeComputer 1.5s ease";
The animation CSS:
#keyframes shakeComputer{
0%{
translateY(0px);
}
15%{
translateY(-50px);
}
30%{
translateY(0px);
}
45%{
translateY(-50px);
}
60%{
translateY(0px);
}
75%{
translateY(-50px);
}
100%{
translateY(0px);
}
85%{
translateY(-50px);
}
}
#keyframes shakePlayer {
0%{
transform: rotateY(180deg) translateY(0px);
}
15%{
transform: rotateY(180deg) translateY(-50px);
}
30%{
transform: rotateY(180deg) translateY(0px);
}
45%{
transform: rotateY(180deg) translateY(-50px);
}
60%{
transform: rotateY(180deg) translateY(0px);
}
75%{
transform: rotateY(180deg) translateY(-50px);
}
100%{
transform: rotateY(180deg) translateY(0px);
}
85%{
transform: rotateY(180deg) translateY(-50px);
}
}
My JS variables:
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
I can't find where the problem is and why the right-hand does not play the animation. If anyone can help me I'd be grateful.

You are missing the transform: property in your shakeComputer animation.
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
playerHand.style.animation = "shakePlayer 1.5s ease";
computerHand.style.animation = "shakeComputer 1.5s ease";
#keyframes shakeComputer{
0%{
transform: translateY(0px);
}
15%{
transform: translateY(-50px);
}
30%{
transform: translateY(0px);
}
45%{
transform: translateY(-50px);
}
60%{
transform: translateY(0px);
}
75%{
transform: translateY(-50px);
}
100%{
transform: translateY(0px);
}
85%{
transform: translateY(-50px);
}
}
#keyframes shakePlayer {
0%{
transform: rotateY(180deg) translateY(0px);
}
15%{
transform: rotateY(180deg) translateY(-50px);
}
30%{
transform: rotateY(180deg) translateY(0px);
}
45%{
transform: rotateY(180deg) translateY(-50px);
}
60%{
transform: rotateY(180deg) translateY(0px);
}
75%{
transform: rotateY(180deg) translateY(-50px);
}
100%{
transform: rotateY(180deg) translateY(0px);
}
85%{
transform: rotateY(180deg) translateY(-50px);
}
}
div {
width: 200px;
height: 200px;
display: inline-block;
border: 1px solid red;
}
.player-hand::before { content: ".player-hand" }
.computer-hand::before { content: ".computer-hand" }
<div class="player-hand"></div>
<div class="computer-hand"></div>

Related

Preloader for part of content

i have css preloader in wordpress site, and
I need the preloader to hide only part of the content.
Now preloader hides the entire page.
Example:
- Site title
- Site menu
- Content (need to hide)
- Footer
In header.php:
https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
$(window).load(function() {
$(".cssload-loader").delay(1300).fadeOut();
$(".preloader").delay(1400).fadeOut("slow");
})
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 100501;
height: 100%;
width: 100%;
}
.cssload-loader {
position: absolute;
left: 50%;
top: 50%;
width: 34.284271247462px;
height: 34.284271247462px;
margin-left: -17.142135623731px;
margin-top: -17.142135623731px;
border-radius: 100%;
animation-name: cssload-loader;
-o-animation-name: cssload-loader;
-ms-animation-name: cssload-loader;
-webkit-animation-name: cssload-loader;
-moz-animation-name: cssload-loader;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-duration: 2.8s;
-o-animation-duration: 2.8s;
-ms-animation-duration: 2.8s;
-webkit-animation-duration: 2.8s;
-moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
display: block;
width: 4px;
height: 14px;
background-color: rgba(0,0,0,0.81);
margin: 1px;
position: absolute;
border-radius: 50%;
animation-duration: 1.045s;
-o-animation-duration: 1.045s;
-ms-animation-duration: 1.045s;
-webkit-animation-duration: 1.045s;
-moz-animation-duration: 1.045s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: ease;
-o-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
animation-name: cssload-rotate0;
-o-animation-name: cssload-rotate0;
-ms-animation-name: cssload-rotate0;
-webkit-animation-name: cssload-rotate0;
-moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
animation-name: cssload-rotate90;
-o-animation-name: cssload-rotate90;
-ms-animation-name: cssload-rotate90;
-webkit-animation-name: cssload-rotate90;
-moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
animation-name: cssload-rotate45;
-o-animation-name: cssload-rotate45;
-ms-animation-name: cssload-rotate45;
-webkit-animation-name: cssload-rotate45;
-moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
animation-name: cssload-rotate135;
-o-animation-name: cssload-rotate135;
-ms-animation-name: cssload-rotate135;
-webkit-animation-name: cssload-rotate135;
-moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
top: 17.142135623731px;
left: 34.284271247462px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
top: 29.213203431093px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
top: 34.284271247462px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
top: 29.213203431093px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
top: 17.142135623731px;
left: 0px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
top: 5.0710678163691px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
top: 0px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
top: 5.0710678163691px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
#keyframes cssload-rotate0 {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-o-keyframes cssload-rotate0 {
0% {
-o-transform: rotate(0deg);
}
60% {
-o-transform: rotate(180deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes cssload-rotate0 {
0% {
-ms-transform: rotate(0deg);
}
60% {
-ms-transform: rotate(180deg);
}
100% {
-ms-transform: rotate(180deg);
}
}
#-webkit-keyframes cssload-rotate0 {
0% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes cssload-rotate0 {
0% {
-moz-transform: rotate(0deg);
}
60% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#keyframes cssload-rotate90 {
0% {
transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-o-keyframes cssload-rotate90 {
0% {
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-ms-keyframes cssload-rotate90 {
0% {
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-webkit-keyframes cssload-rotate90 {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-moz-keyframes cssload-rotate90 {
0% {
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#keyframes cssload-rotate45 {
0% {
transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-o-keyframes cssload-rotate45 {
0% {
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-ms-keyframes cssload-rotate45 {
0% {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-webkit-keyframes cssload-rotate45 {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-moz-keyframes cssload-rotate45 {
0% {
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#keyframes cssload-rotate135 {
0% {
transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-o-keyframes cssload-rotate135 {
0% {
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-ms-keyframes cssload-rotate135 {
0% {
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-webkit-keyframes cssload-rotate135 {
0% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-moz-keyframes cssload-rotate135 {
0% {
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#keyframes cssload-loader {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-loader {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-loader {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="preloader">
<div class="cssload-loader">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
Here is my site so you can see the page code
I think i need script to show Site title and menu, or i need change css styles to hide content?

Change the CSS like below.
.preloader {
position: fixed;
background-color: #fff;
z-index: 107;
height: 100%;
width: 100%;
}
And put preloader element inside content div like this.
<div class="col-md-8 col-md-offset-2">
<div class="preloader" style="display: block;">
<div class="cssload-loader" style="display: none;">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
<article>.... Article content .....</article>
</div>

Make Coin Flip Animation Two Sided

I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
jsFiddle Link
HTML Code:
<div id="coin-flip">
<button id="btnFlip">Flip the Coin</button></br></br></br>
<div id="coin-flip-cont">
<div id="coin"></div>
</div></br></br></br>
<h2 id="result"></h2>
</div>
Javascript, jQuery Code:
$(function() {
var coin = {
sideOne: "./img/image1.png",
sideTwo: "./img/image2.png"
}
$("#btnFlip").click(function() {
$("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
});
});
CSS is from Animate.css, You can view it in the Fiddle.
Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.
EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2
I feel that this can be done in a much simpler way and with the css that I already have.

First of all, change this line of your HTML code :
<button id="btnFlip">Flip the Coin</button>
To :
<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>
And then change your javascript to this code :
function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
if (document.getElementById("coin").src == coin_1){
document.getElementById("coin").src == coin_2
}
if (document.getElementById("coin").src == coin_2){
document.getElementById("coin").src == coin_1
}
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}
This javascript code flips the coin 8 times before choosing a random side to land on.

you can use animationend event to detect when the CSS animation ended.
Then you execute code to change the image source.
JQuery
$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$("#coin").removeClass('animateCoin');
setTimeout(function() {
var srcImg = $($('#coin img')[0]).attr('src');
if (srcImg === coin.heads)
$($('#coin img')[0]).attr('src',coin.tails);
else
$($('#coin img')[0]).attr('src',coin.heads);
$("#coin").addClass('animateCoin');
},50);
});
CSS :
.animateCoin {
animation: flip 1s;
}

Here is the complete code you can flip coin 2 sided solution run snippet.
To watch correct result see in full page view otherwise you can see on codepen.
You can have link of codepen too click here
jQuery(document).ready(function($){
var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];
function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}
$('#flip').on('click', function(){
$('#coin').removeClass();
setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);
});
});
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
border: solid 5px gray;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
border: solid 5px gray;
}
#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards;
animation: rotate900 3s linear forwards;
}
#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards;
animation: rotate1080 3s linear forwards;
}
#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards;
animation: rotate1260 3s linear forwards;
}
#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards;
animation: rotate1440 3s linear forwards;
}
#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards;
animation: rotate1620 3s linear forwards;
}
#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards;
animation: rotate1800 3s linear forwards;
}
#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards;
animation: rotate1980 3s linear forwards;
}
#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards;
animation: rotate2160 3s linear forwards;
}
#-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
#keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 125px;
position: inherit;
}
.front-text{
font-weight: 700 !important;
margin-top: 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div>
<div id="coin-flip-cont">
<div id="coin">
<div class="front"><p class="front-text">Head</p></div>
<div class="back"><p class="front-text">Tail</p></div>
</div>
</div>
<button type="button" id="flip" class="button"> Flip Coin</button>
</div>
</center>

AJAX on load loading spinner

I'm wanting to place something like this on my website. Here is the codepen.
#-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 wanting this to display until all my ajax has loaded on my site, I have 5-6 API GET calls, and one by rails. How would i go about this? So that it covers the whole page until its loaded.

Convert the .loading-spinner to be a mask (see the code) so it will hide the content.
When ajax done just .hide() it.
$.ajax({
url: 'your_ajax',
success: function() {
hideLoader()
},
error: function() {
hideLoader()
}
});
function hideLoader() {
$('.loading-spinner').hide();
}
#-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 {
background: #774CFF;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.loading-spinner:before {
-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:before {
content:"";
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="loading-spinner"></div>
Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum
</body>

CSS How can I make a particle leave a trail that fades away?

I got the particle to move around which is what I wanted, but I want to add a little trail that will fade a way and I am not sure how to go about doing that
Is it possible to do with only css? or do I have to involve jquery in this?
Here is a demo: LINK
#object{
position: absolute;
bottom:-2em;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
25% { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
50% { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
75% { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
100% { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }}

I was doing something similar which is how I found this question. I took what I came up with and adapted it to your answer. Not sure it will work for what you're doing but it's still fun.
http://jsfiddle.net/y40kwyhr/2/
var obj = document.getElementById("object");
class Particle {
constructor(parent) {
this.div = document.createElement("div");
this.div.classList.add("particle");
this.div.classList.add("twinkle");
this.div.id = "particle-" + Date.now();
parent.appendChild(this.div);
setTimeout(() => { // remove particle
if(this.driftIntervalId) clearInterval(this.driftIntervalId);
this.div.remove();
}, 400);
}
drift(speed = 1) {
var rad = Math.PI * Math.random();
this.driftIntervalId = setInterval(() => {
var left = +this.div.style.left.replace("px",'');
var top = +this.div.style.top.replace("px",'');
left += Math.sin(rad) * speed;
top += Math.cos(rad) * speed;
this.div.style.left = left + "px";
this.div.style.top = top + "px";
}, 10);
}
}
var particleFactory = function(meteor) {
var rect = meteor.getBoundingClientRect();
var particle = new Particle(meteor.parentElement);
particle.div.style.left = rect.left + "px";
particle.div.style.top = rect.top + "px";
particle.drift(0.4);
setTimeout(() => {
particleFactory(meteor);
}, 100);
};
particleFactory(obj);

Something like this?
Changed keyframe animation so it orbits correctly
Added new animation for the 'trail' to fadeout over time.
Is this what you meant?
#object{
position: absolute;
top: 200px;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite;
-moz-animation: myOrbit-fadeout 6s linear infinite;
-o-animation: myOrbit-fadeout 6s linear infinite;
animation: myOrbit-fadeout 6s linear infinite;
}
#-webkit-keyframes myOrbit {
0% { -webkit-transform: rotate(0deg) translateY(200px); }
25% { -webkit-transform: rotate(90deg) translateY(200px); }
50% { -webkit-transform: rotate(180deg) translateY(200px); }
75% { -webkit-transform: rotate(270deg) translateY(200px); }
100% { -webkit-transform: rotate(360deg) translateY(200px); }
}
#-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateY(200px); }
25% { -moz-transform: rotate(90deg) translateY(200px); }
50% { -moz-transform: rotate(180deg) translateY(200px); }
75% { -moz-transform: rotate(270deg) translateY(200px); }
100% { -moz-transform: rotate(360deg) translateY(200px); }
}
#-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateY(200px); }
25% { -o-transform: rotate(90deg) translateY(200px); }
50% { -o-transform: rotate(180deg) translateY(200px); }
75% { -o-transform: rotate(270deg) translateY(200px); }
100% { -o-transform: rotate(360deg) translateY(200px); }
}
#keyframes myOrbit {
0% { transform: rotate(0deg) translateY(200px); }
25% { transform: rotate(90deg) translateY(200px); }
50% { transform: rotate(180deg) translateY(200px); }
75% { transform: rotate(270deg) translateY(200px); }
100% { transform: rotate(360deg) translateY(200px); }
}
#-webkit-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-moz-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#-o-keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}
#keyframes myOrbit-fadeout {
0% { opacity: 1.0; }
25% { opacity: .75; }
50% { opacity: .5; }
75% { opacity: .25; }
100% { opacity: 0; }
}

Scroll function not working when overflow hidden

I have a program that should do a certain thing when you scroll upwards however, it does not respond to my scroll. I have reason to believe it is because of the
overflow: hidden
attribute I have added to the body, however, I do not want the scroll bar to show. Any idea on how to make the animation show when user scrolls downwards, but at the same time, not move the page (not actually scroll down?)
JSFIDDLE:
http://jsfiddle.net/aritro33/KFxgL/
HTML:
<div style="width: 200px; height: 1000px"></div>
<div id="up">SCROLL UP</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
overflow: hidden;
text-align: center;
background-color: #79CDCD;
}
p {
font-family:'Roboto';
font-size: 60px;
color: white;
z-index: -1;
}
#next {
background-color: #79cda3;
width: 1185px;
position: relative;
right: 10px;
height: 750px;
top: -200px;
z-index: -1;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
JS:
$('#next').fadeTo(0,0);
$(function () {
var lastScroll = 0;
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScroll) {
$('p').fadeTo(350, 0);
$('p').fadeTo(370, 1);
$('#next').fadeTo(0,1);
$('#next').addClass('box animated bounceInUp');
}
lastScroll = st;
});
});

For webkit browser you can try this:
Without overflow:hidden in body
::-webkit-scrollbar {
display: none;
}
DEMO

Develop Reference

JavaScript is the programming language of the Web.

Problems implementing #keyframes CSS animation - javascript

Related

Preloader for part of content

Make Coin Flip Animation Two Sided

AJAX on load loading spinner

CSS How can I make a particle leave a trail that fades away?

Scroll function not working when overflow hidden

Categories

Resources