I have this spinning div and I want it to stop when I click on a button by using the .stop() method, but for some reason it doesn't work. I hope you can shed some light on this issue for me.
Here is a snippet which performs the animation and demonstrates that the Stop animation button does not stop the animation.
$('button').bind('click', function(){
$('.player-disc').stop(true, false);
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Stop animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
I've also tried any other combinations of .stop(false, false) etc.
a jsFiddle
It's a CSS animation, not a jQuery animation so you just need to set the css animation property to "none":
$('.player-disc').css('animation', 'none');
As others pointed out, it's CSS animation.
To stop it and reset disc to its original position use (this also resets animation):
$('.player-disc').css('animation', 'none');
To pause it and not reset disc to its original position use:
$('.player-disc').css('animation-play-state', 'paused');
You can then resume animation using:
$('.player-disc').css('animation-play-state', 'running');
$('#btn1').bind('click', function(){
$('.player-disc').css('animation', 'none');
});
$('#btn2').bind('click', function(){
$('.player-disc').css('animation-play-state', 'paused');
});
$('#btn3').bind('click', function(){
$('.player-disc').css('animation-play-state', 'running');
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" type="button">Set animation to none</button>
<button id="btn2" type="button">Pause animation</button>
<button id="btn3" type="button">Play animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
Your animation is being initialised in the CSS. Therefore you must stop it by CSS. $(".player-disc").css("animation-play-state", "paused");
Try this code...
$("button").click(function(){
$('.player-disc').css('animation', 'none');
});
Fiddle
Related
I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.
I tried this:
setTimeout(function() {
document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);
but this moves the object once and I want to make the cube spin infinite with 3 stops.
So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.
Is there a way to do it ? Or is it not possible.
You can use a keyframe animation for this.
For example:
#keyframes rotation {
0%, 100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
And then you use it like this
.my-element {
animation: rotation 5s infinite;
}
Here it is in combination with your code from the codepen:
.container {
margin-top: 150px;
}
.news-grid {
width: 300px;
margin: auto;
}
.news-card {
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
outline: 1px solid blue;
}
.face>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#experiment {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(245deg);
animation: rotation 5s infinite;
}
.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#keyframes rotation {
0%,
100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
<div class="container">
<div class="news-grid">
<div class="news-card">
<div class="cube">
<div class="face one"></div>
<div class="face two">
<img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
<div class="face three">
Information Architecture 101: Techniques and Best Practices
</div>
</div>
</div>
</div>
</div>
You need to use setInterval, not setTimeout
I have a loading spinner on a page that shows after a button click for a few seconds.
I tried to add a loading text in the middle of the loading circle but its also spinning. How do I stop the text from spinning? I thought that a span tag is not affected by css transform.
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function() {
document.getElementById("loader").style.display = "none";
}, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>
Instead of having both the spinner and the text in the same element, add another. So we can only spin that one.
I've named it .spinner, next to loading-text:
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function(){
document.getElementById("loader").style.display = "none"; }, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.spinner {
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader, .loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<div class="spinner"></div>
<span class="loading-text">Loading...</span>
</div>
</div>
Or you can use pseudo-element like:
function load() {
document.getElementById("loader").style.display = "block";
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
}
#loader {
position: absolute;
}
#loader:before{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>
I want to create the letter z in animation.
In such a way that the first part (1) appears without delay with animation from left to right.
When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation.
When the second part (2) is down, the third part (3) will appear from left to right with animation.
The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late.
Thank you in advance for your cooperation.
#global{
width:200px;
position:relative;
cursor:pointer;
height:200px;
background-color: black;
padding: 1rem;
}
.mask{
position:absolute;
border-radius:2px;
overflow:hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane{
background:#ffffff;
width:400%;
height:100%;
position:absolute;
transform : translate3d(0px,0,0);
z-index:100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane{
z-index:2000;
animation: trans1 1s ease-in infinite 0s forwards;
-webkit-animation: trans1 1s ease-in infinite 0s forwards;
}
#middle .plane{
transform: translate3d(0px,0,0);
background: #bbbbbb;
animation: trans2 1s linear infinite 2s forwards;
-webkit-animation: trans2 1s linear infinite 2s forwards;
}
#bottom .plane{
z-index:2000;
animation: trans3 2s ease-out infinite 4s forwards;
-webkit-animation: trans3 2s ease-out infinite 4s forwards;
}
#top{
width:200px;
height:15px;
left:0;
z-index:100;
transform: skew(-15deg, 0);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#middle{
width:187px;
height:25px;
left:6px;
top:78px;
transform:skew(-15deg, -40deg);
-webkit-transform:skew(-15deg, -40deg);
-moz-transform:skew(-15deg, -40deg);
-ms-transform:skew(-15deg, -40deg);
-o-transform:skew(-15deg, -40deg);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#bottom{
width:200px;
height:15px;
top:159px;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2{
0% {
width: 0%;
left: 100%;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
This snippet thinks of things slightly differently.
Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.
That way aspects such as the lines not being visible to start with are dealt with.
#global {
width: 200px;
position: relative;
cursor: pointer;
height: 200px;
background-color: black;
padding: 1rem;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane {
z-index: 2000;
animation: trans1 3s ease-in infinite forwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 3s linear infinite forwards;
}
#bottom .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite forwards;
}
#top {
width: 200px;
height: 15px;
left: 0;
z-index: 100;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#middle {
width: 187px;
height: 25px;
left: 6px;
top: 78px;
transform: skew(-15deg, -40deg);
border-radius: 20px;
}
#bottom {
width: 200px;
height: 15px;
top: 159px;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1 {
0% {
width: 0%;
left: 0;
}
33.33% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2 {
0% {
width: 0%;
left: 100%;
}
33.33% {
width: 0%;
left: 100%;
}
66.66% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3 {
0% {
width: 0%;
left: 0;
}
66.66% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
I have a page loader , it will load until my entire page loading complete ,this works fine with chrome but doesnt support in firefox .any other solutions welcome
<style>
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
</style>
<body>
<div id="loading">
<img id="loading-image" src="images/loader.gif" alt="Loading..." />
</div>
<script>
window.onload = function(){ document.getElementById("loading").style.display = "none" }
</script>
</body>
this is a complete ansower for u :)
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 30;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display:block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
that was the style now the body
<div id="loader"></div>
hope it helps :)