Not able to restart animation

Not able to restart animation - javascript

I am trying to restart css animation when contents of div is changed. I have tried all method i can find googling none of them seems to work. I have tried
JQUERY
$("p1").removeClass("content");
$("p1").addClass("content");
JAVASCRIPT
var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
and some other methods like setting display to none and then block or changing animationName
Here is my code
HTML
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<img src="img/saying.png" class="statusclound"/>
<p class="status"></p>
<img class="frame" src="img/splash_1.png" id="frame_1"/>
</div>
</div>
CSS
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
#keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
JAVASCRIPT
function test() {
var currentPatch = document.getElementById("p" + patchTurn);
currentPatch.getElementsByClassName("person")[0].style.backgroundImage = "url(http://localhost:80/slingshot/uploads/" + jsonData[3] + ")";
currentPatch.getElementsByClassName("status")[0].innerHTML = jsonData[2];
currentPatch.getElementsByClassName("frame")[0].src = "img/splash_" + randomFrame + ".png";
currentPatch.style.animationName = "buzz-out";
currentPatch.style.display = "block";
}
So when the page loads div is disabled and test() function runs and div animates but when i change some content inside that div and re-run test() function it doesn't animate.

I'm not too clear on what part you need help with so I've made a working JSfiddle that shows all of it working.
I created an event listener for changes in the div and adds the class "content-active" to the div. This class adds the animation name and sets the display to block. Then the class is removed and re-added to restart the animation. To get the animation to restart, I set a 10ms delay. (You can also clone the div if you'd like)
https://jsfiddle.net/heraldo/zyjuoLt1/
JS:
// watch for changes in the DOM
$('#content').bind("DOMSubtreeModified",function(){
// clear any previous animation
$("#p1").removeClass("content-active");
// setting a timeout allows the animation to restart
// NOTE, you can also clone the element and re-add it to do
// the same thing.
setTimeout(function(){ $("#p1").addClass("content-active"); }, 10);
});
// simply adds text to the status <p>
$('#modify').click(function(){
$(".person").append('text ');
});
CSS:
#content {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
.content-active{
display: block;
animation-name: buzzOut;
}
#keyframes buzzOut {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
HTML:
<!-- simply adds text to the div -->
<button id="modify">Add Text</button>
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<p class="status"></p>
</div>
</div>
Let me know if this works for you!

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>

Shivering Animation effect in html css js jquery

Hello i want this shivering animation or effect on hover same in the url. Kindly guide me Please.Any reference would be appreciated.
Demo https://expatexplorer.hsbc.com/survey/#/countries
(On the map hover any country circle and see moving other small circles.

Very simple example: There are many libraries that handle animation >
jRumble / CSSshake / Animate.css
body {
background-color: #fff;
text-align: center;
margin: 50px
}
.wrapper {
top: 100px;
left: 50%;
text-align: center;
display: inline-block;
}
.shake {
display: inline-block;
position: relative;
}
.circle {
border: 4px solid #f00;
background: #f00;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 0px -10px;
}
#-webkit-keyframes circled {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
.shake:hover,
.shake:focus {
cursor: pointer;
-webkit-animation-name: circled;
-webkit-animation-duration: 0.9s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
<div class="wrapper">
<div class="circle shake"></div>
<div class="circle shake"></div>
<div class="circle shake"></div>
</div>

It's done using Flash rather than css & jQuery - so unless you know Flash or can find that fla file then it will not be a straightforward task.

Animation not functioning as it is set

I am wanting text to come out of a bag and in a vertical manner and then do a 90 degree turn, so that the text is in a correct position right where I want it.
Right now, my test goes in a huge circle on my page. It lands where I want it to, but it comes out of the page completely wrong. I created a fiddle, but it is really not doing any justice because it doesn't look mine at all. If there was any way to show what mine was doing I would.
I want it to look like names are being taken from a bag. Just like they would be if you had 10 people in a room pulling names out of a bag.
https://jsfiddle.net/n2o672q3/1/
I have these keyframes set to the fegree I want, so again, I'm not sure why mine do a 360.
#-moz-keyframes spin {
0% {
-moz-transform: rotate(110deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(110deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(110deg);
transform:rotate(110deg);
}
Just image a bird flying up and doing a large circle in the air and that is what mine is doing.
Any idea how I can fix this?

Have you considered the use of transform-origin property?
Take a look at this. Is this what you are trying to achieve?
CSS:
.shuffle_results {
position: relative;
z-index: -1;
font-size: 2em;
-webkit-animation:spin 3s linear;
-moz-animation:spin 3s linear;
animation:spin 3s linear;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
#-moz-keyframes spin {
0% { -moz-transform: translate(0px, 200px) rotate(140deg); }
100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: translate(0px, 200px) rotate(140deg); }
100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}
#keyframes spin {
0% { -webkit-transform: translate(100px, 200px) rotate(140deg); transform: translate(100px, 200px) rotate(140deg); }
100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
}
#paperBag {
position: relative;
bottom: 0px;
left: 0px;
margin-top: 40px;
z-index: 1;
}

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.

Not able to restart animation - javascript

Related

Preloader for part of content

Make Coin Flip Animation Two Sided

Shivering Animation effect in html css js jquery

Animation not functioning as it is set

Scroll function not working when overflow hidden

Categories

Resources