I am try to make a running santa in my project.
How to loop transform: scaleX(1) and transform: scaleX(-1) when the animation start in 0% an 50%?
setTimeout(function(){
//Enter your stuff here
$('.animation').css("transform", "scaleX(1)")
}, 7500);
.animation img {
max-width: 100%;
}
.animation {
width: 50px;
position: absolute;
bottom: 0;
animation: example 15s infinite;
padding: 5px 9px 1px 0;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
transform: scaleX(-1)
}
#keyframes example {
0%,
100% {
left: 0;
/* background: white; */
}
40% {
/* background: green; */
}
30% {
/* background: yellow; */
}
20% {
/* background: orange; */
}
50% {
left: 97%;
/* background: blue; */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation">
<img src="https://lh3.googleusercontent.com/pw/AM-JKLX6lpuXIUQzWYC8J9vlnsS9Cb9irs-2kPKBM9XaugC4iDCag2-7w-zC7BSQls0Ea51YewUFFSJquODLZ8PfaAoqelAXOlCKmh0H7Cn9G5HcwX_u2XNT_tvr8ZD5as6He3dpMrrVH_-ZCaG1xctS_Tei=s512-no" alt="run santa run">
</div>
Codepen link: demo
it is a good practise.
I tried to use JS/Jquery listener to solve it but it might be difficult cause we need to track the keyFrame changes instead of just start/end point.
So I am thinking to solve it via CSS only. Your requirement is to flip the santa when it hits the viewport. If we just set transform: scaleX(1) at 50%, then the santa will flip at halfway.
Therefore I set mark point at 1%, 49% and 99% to make sure santa will not flip at these point. Below is my code based on your codepen link:
#keyframes example {
0%,
100% {
transform: scaleX(-1)
/* background: white; */
}
1%{
left:1%;
transform: scaleX(-1);
}
99%{
left:1%;
transform: scaleX(1);
}
40% {
/* background: green; */
}
30% {
/* background: yellow; */
}
20% {
/* background: orange; */
}
49% {
left:96%;
transform: scaleX(-1)
}
50% {
transform: scaleX(1);
/* background: blue; */
}
}
I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.
I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!
$(window).load(function() {
$('#loading').hide();
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color : #0e086b;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
you can handle it manually. whenever you want to show a spinner you can call
$('#loading').show();
and to hide it after the ajax call use this in the callback function
$('#loading').hide();
The following solution will hide the spinner after 3 seconds, when the page loaded
$(document).ready(function() {
setTimeout(function(){ $('#loading').hide(); }, 3000);
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
simply remove the anim !
on the real DOMContentLoaded event
window.addEventListener('DOMContentLoaded', (event) =>
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
);
sample code :
(simply click on snippet to stop the animation)
document.body.onclick = () => // simulate DOMContentLoaded event
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
#loading {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : #040030e7;
z-index : 99;
}
#loading > div {
position : absolute;
top : calc(50% - 32px);
left : calc(50% - 32px);
width : 64px;
height : 64px;
border-radius : 50%;
perspective : 800px;
}
#loading > div > div {
position : absolute;
box-sizing : border-box;
width : 100%;
height : 100%;
border-radius : 50%;
left : 0%;
top : 0%;
border-bottom : 3px solid #f5f125;
}
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite; }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
#keyframes rotate-1 {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
#keyframes rotate-2 {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
#keyframes rotate-3 {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
<div id="loading"> <!-- loading annimation-->
<div> <div></div> <div></div> <div></div> </div>
</div>
I am using Python and Django to modify a website, I'm using bootstrap 4 as well.
I am attempting to change the pre-loaded spinner currently in use (the typical circle spinner).
I have entered the preloader within my html file, my css file, and made a custom.js file to support the loader yet when I refresh the page the loader shows the standard circle. (I have deleted the previous spinner files and style code but for some reason it still shows when I use "div id=preloader"
Here is my preloader css style.
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should be a color other than white */
z-index: 1000;
/* makes sure it stays on top */
}
.pre-container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #53dd6c;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Here is the custom js file
$(window).load(function () {
// preloader
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(550).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(550).css({
'overflow': 'visible'
});
});
here is my preloader tag in my html file
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
There are no error message but I want the bounce to show.
I am trying to animate a certain page where there are three main components, two tables and one chart.
Please refer the JSFiddle to replicate the same on your Safari browser.
Link to JSFiddle
Two rows of the first table are shown one after the another i.e. the green row slides in then slides out cueing the yellow row to slide in. After a couple of seconds the yellow row slides out and then green comes back. After green comes back to the original position.
Two divs below slide in simultaneously. Now, what is happening is I make the green row absolute after it slides out so that the yellow row shifts up on the same position but on Safari, the 'position: absolute' in the green row is not applying.
#-webkit-keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
The yellow row also when slides out does not take absolute position to pull the lower two division up.
#-webkit-keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
#keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
Also, the two divisions at the bottom do not animate and just suddenly appear.
Check the fiddle on Chrome, that is how ideally it should work and then check it on Safari for the main issue.
Do not be confused by the way I am injecting the animation, my requirement is that I want to chain multiple animations and start and stop them on demand so what I do is, I pass a list of animation properties and join them individually and add it to the DOM style. I was earlier concatenating the shorthand but apparently Safari does not consider the shorthand so I went further and split each animation into its properties.
Also, one more issue which I am not able to replicate is when I click on the animate button, all my animations run simultaneously ignoring the delay that I give.
function animator () {
addAnimationToElement('row-1', ['fadeInLeftBig', 'slideRightDisappear', 'slideLeftAppear'], ['0.5s', '0.3s', '0.5s'], ['linear', 'linear', 'linear'], ['0.6s', '3s', '7.5s'], ['1', '1', '1'], ['normal', 'normal', 'normal'], ['forwards', 'forwards', 'forwards'], ['running', 'running', 'running'])
addAnimationToElement('row-2', ['slideInLeft', 'slideLeftDisappear'], ['0.5s', '0.5s'], ['linear', 'linear'], ['4s', '6.5s'], ['1', '1'], ['normal', 'normal'], ['forwards', 'forwards'], ['running', 'running'])
addAnimationToElement('table', ['fadeInLeftBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
addAnimationToElement('chart', ['fadeInRightBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
}
function pause () {
document.getElementById('portfolio').style.opacity = 0;
}
function addAnimationToElement (elementID, animationName, animationDuration, animationTimingFunction, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState) {
// Animation for Safari
document.getElementById(elementID).style.WebkitAnimationName = animationName.join(', ')
document.getElementById(elementID).style.WebkitAnimationDuration = animationDuration.join(', ')
document.getElementById(elementID).style.WebkitAnimationTimingFunction = animationTimingFunction.join(', ')
document.getElementById(elementID).style.WebkitAnimationDelay = animationDelay.join(', ')
document.getElementById(elementID).style.WebkitAnimationIterationCount = animationIterationCount.join(', ')
document.getElementById(elementID).style.WebkitAnimationDirection = animationDirection.join(', ')
document.getElementById(elementID).style.WebkitAnimationFillMode = animationFillMode.join(', ')
document.getElementById(elementID).style.WebkitAnimationPlayState = animationPlayState.join(', ')
// Animation for other browsers
document.getElementById(elementID).style.animationName = animationName.join(', ')
document.getElementById(elementID).style.animationDuration = animationDuration.join(', ')
document.getElementById(elementID).style.animationTimingFunction = animationTimingFunction.join(', ')
document.getElementById(elementID).style.animationDelay = animationDelay.join(', ')
document.getElementById(elementID).style.animationIterationCount = animationIterationCount.join(', ')
document.getElementById(elementID).style.animationDirection = animationDirection.join(', ')
document.getElementById(elementID).style.animationFillMode = animationFillMode.join(', ')
document.getElementById(elementID).style.animationPlayState = animationPlayState.join(', ')
}
.transparent_element {
opacity: 0;
}
#row-1 {
width: 300px;
height: 100px;
display: block;
background-color: green;
}
#row-2 {
width: 300px;
height: 100px;
display: block;
background-color: yellow;
}
#table {
width: 150px;
height: 150px;
background-color: red;
display: inline-block;
}
#chart {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
right: 0;
display: inline-block;
}
#-webkit-keyframes slideLeftAppear {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0,);
-webkit-transform: translate3d(0);
position: relative;
display: block;
opacity: 1;
}
}
#keyframes slideLeftAppear {
0% {
opacity: 0;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(0);
-webkit-transform: translateX(0);
position: relative;
display: block;
opacity: 1;
}
}
#-webkit-keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#keyframes slideRightDisappear {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
99% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
position: absolute;
}
}
#-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(400px, 0, 0);
transform: translate3d(400px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(400px, 0, 0);
transform: translate3d(400px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
#keyframes slideLeftDisappear {
0% {
display: inline;
opacity: 1;
}
99% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
100% {
position: absolute;
opacity: 0;
}
}
<div>
<button onclick="animator()">
Animate
</button>
<button onclick="pause()">
Pause
</button>
<table>
<tr id="row-1" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); height: 90px;">
</tr>
<tr id="row-2" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); height: 90px;">
</tr>
</table>
<div id="table" class="transparent_element"></div>
<div id="chart" class="transparent_element"></div>
</div>
</div>
Any idea or suggestion will be highly appreciated.
Thank you in advance!
I have the following page (see image)
When I click the red button, I want a div to animate when it shows to the user. However, I want the animation to come from the button. Right now the animation comes from the center of the page.
Here's the code I have
#keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
}
100%{
opacity:1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0%{
opacity:1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(0.5);
}
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
When I click on the red circle, the user sees an overlay page (which is actually a div with class overlay that is absolutely positioned). I add fade-scale-in class to the div (with class overlay). The div then transitions from the center of the screen and grows to fit the user's screen. I want it so that the div transitions from the red circle. Can I use transforms to make this happen?
Here's the code. As you notice, when you click on the yellow circle, the div animates from the center and not from the yellow circle:
https://jsfiddle.net/e4g71y4m/3/
You can do this by adding transform-origin: top left; to the .overlay element. (Don't forget the prefixes (-webkit, -moz etc.)
var overlay$ = $('.overlay');
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
console.debug('test');
if (e.animationName !== undefined && e.animationName == "fadeOutScale") {
overlay$.addClass('hide');
} else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") {
overlay$.addClass('hide');
}
});
$('.click').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-in');
});
$('.click-again').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-out');
});
#keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
.hide {
display: none;
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background: red;
transform-origin: top left;
}
.click {
background: yellow;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Click me</div>
<div class="overlay hide">
Test
<div class="click-again">Click me again</div>
</div>