How to smoothly transition between keyframes? - javascript

Below you can see the keyframes. It's a gradient that is supposed to simulate an explosion. When the animation plays it doesn't fade into the next keyframe. It just instantly changes to the next keyframe. I've tried certain transition properties on the regarding class, nothing i've tried seems to work. I have tried some animation properties as well. They don't work either.
#keyframes Explosion {
0% {
}
20% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 0) 20%,
rgba(250, 0, 0, 0) 60%
);
transform: scale(2);
}
40% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 1) 20%,
rgba(250, 0, 0, 0.3) 60%
);
transform: scale(2);
}
60% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 1) 20%,
rgba(250, 0, 0, 1) 60%
);
transform: scale(2);
}
100% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 60%,
rgba(246, 237, 0, 1) 65%,
rgba(250, 0, 0, 1) 70%
);
transform: scale(2.3);
}
}


background-image is animatable but only discretely. So while you cannot smoothly animate between background images what you can do in your case is use opacity on before and after pseudo elements to fade out one background image while the next one fades in.
In this snippet the scaling remains with the element, the backgrounds come and go on the pseudo elements.
.container {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.explosion {
width: 50vmin;
height: 50vmin;
position: relative;
animation: Explosion 5s linear infinite;
}
.explosion::before,
.explosion::after {
content: '';
animation: var(--animation) 5s linear infinite;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.explosion::before {
--animation: Explosionb;
}
.explosion::after {
--animation: Explosiona;
}
#keyframes Explosion {
0% {}
20%,
40%,
60% {
transform: scale(2);
}
100% {
transform: scale(2.3);
}
}
#keyframes Explosionb {
0% {
opacity: 0;
}
20% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 0) 20%, rgba(250, 0, 0, 0) 60%);
opacity: 1;
}
40% {
opacity: 0;
}
41% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 1) 60%);
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes Explosiona {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
21% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 0.3) 60%);
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 60%, rgba(246, 237, 0, 1) 65%, rgba(250, 0, 0, 1) 70%);
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="explosion"></div>
</div>
Obviously you will want to alter the elements' dimensions to suit your particular case.

Related

Javascript/jQuery FlipClock destroy/clearInterval

I'm trying to use this FlipClock plugin.
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I wonder if do We have possible to destroy/clearInterval var clock; just using clearInterval(clock) ? Tried and no luck.
I already open the manual documentation, but seems I'm not so understand how to destroy that.

Per the documentation you linked, the [clock instance has .stop() and reset() methods...
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
function stopClock() {
clock.stop();
}
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<button onclick="stopClock()">stop</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:
Here clock variable is not a timer set with setInterval so you can't use clearInterval.
Events callback should help you to do your thing .

Trying to get a Bootstrap Carousal to show 4 items fixed

I found this:
css:
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.scene {
border: 1px solid #CCC;
margin: 40px 0;
position: relative;
width: 210px;
height: 140px;
margin: 40px auto;
perspective: 1000px;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-288px);
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 190px;
height: 120px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.carousel__cell:nth-child(9n+1) { background: hsla( 0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }
html:
<div class="scene">
<div class="carousel">
<div class="carousel__cell">1</div>
<div class="carousel__cell">2</div>
<div class="carousel__cell">3</div>
<div class="carousel__cell">4</div>
<div class="carousel__cell">5</div>
<div class="carousel__cell">6</div>
<div class="carousel__cell">7</div>
<div class="carousel__cell">8</div>
<div class="carousel__cell">9</div>
Previous
Next
javascript:
var carousel = document.querySelector('.carousel');
var cellCount = 9;
var selectedIndex = 0;
function rotateCarousel() {
var angle = selectedIndex / cellCount * -360;
carousel.style.transform = 'translateZ(-288px) rotateY(' + angle + 'deg)';
}
var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener( 'click', function() {
selectedIndex--;
rotateCarousel();
});
var nextButton = document.querySelector('.next-button');
nextButton.addEventListener( 'click', function() {
selectedIndex++;
rotateCarousel();
});
https://codepen.io/desandro/pen/jxwELK
But cant seem to get 4 fixed items to work, any help, i stripped some parts of the css and javascript but didn't display the items correctly.
I tried this css:
.carousel__cell:nth-child(9n+1) { background: hsla( 0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(128px);
}
.carousel__cell:nth-child(2) { transform: rotateY( 90deg) translateZ(128px);
}
.carousel__cell:nth-child(3) { transform: rotateY( 180deg) translateZ(128px);
}
.carousel__cell:nth-child(4) { transform: rotateY(360deg) translateZ(128px);
}
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px);
}
and change the cell count to 4.
But im missing a cell

.scene {
border: 1px solid #CCC;
margin: 40px 0;
position: relative;
width: 210px;
height: 140px;
margin: 40px auto;
perspective: 1000px;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-288px);
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 190px;
height: 120px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.carousel__cell:nth-child(9n+1) { background: hsla( 0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(128px); }
.carousel__cell:nth-child(2) { transform: rotateY( 90deg) translateZ(128px); }
.carousel__cell:nth-child(3) { transform: rotateY( 180deg) translateZ(128px); }
.carousel__cell:nth-child(4) { transform: rotateY(270deg) translateZ(128px); }
var cellCount = 4;

CSS circle rotate animation causing wobbling(shaking) in IE11 browser

Image: Spinner rotating along the border rim of other solid circle
Visit https://codepen.io/bygrace1986/pen/wmyarb
HTML:
<div class="outer-circle">
<div class="spinner"></div>
</div>
CSS:
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 4s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.9) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.6) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: white;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
The inner spinner circle is wobbling(shaking) in IE 11 browser. It works perfectly in Google chrome. Have to test in IE browser only to look at the issue. Appreciate any suggestion/help here...........................................................................................................................................................

Stop ::-webkit-progress-value animation

How can I stop this animation through JS/Jquery?
.progressLoading::-webkit-progress-value {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 10px;
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(left, #963a2d, #832417);
background-size: 25px 16px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
#-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: 100px 0px, 0 0, 0 0}
}
I've tried this with no success:
$(".progressLoading::-webkit-progress-value").css({ '-webkit-animation-play-state': 'paused' });

As far as I know, you can't select pseudo elements with jQuery since they don't technically exist in the DOM tree.
One option would be toggle or add a class to the element:
$(".progressLoading").addClass('paused');
$(".progressLoading").toggleClass('paused'); // or toggle it
Then you could use the selector .progressLoading.paused::-webkit-progress-value to select the element and pause the animation via the CSS:
.progressLoading.paused::-webkit-progress-value {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

Retriggering an animation

Good day! I am trying to implement a progress bar which, when a button is clicked will be filled by some amount. I found this to be quite useful as a base:
http://css-tricks.com/css3-progress-bars/
The way to increase how much the bar is filed is to modify the width: property of the span element, which is basically 1 line of javascript:
document.getElementById("this").style.width = "35%";
The problem is that although it will work, the fill animation will not be triggered. I searched here for people with simular problems and I found this:How do I re-trigger a WebKit CSS animation via JavaScript?
Which offered some solutions which I tried to implement in the code. None of them seem to work so I decided to make a new thread. The entire source code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tt1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
.meter {
width:15%;
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
padding: 10px;
}
.meter > span {
display: block;
height: 100%;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
</head>
<body>
<div id="aa" class="meter">
<span id="this" style="width: 15%"></span>
</div>
<button onclick="asd()">asd</button>
</body>
</html>
<script>
function asd() {
document.getElementById("this").style.width = "35%";
document.getElementById("aa").style.animationName = "";
document.getElementById("aa").style.animationName = "move 2s";
document.getElementById("aa").style.webkitAnimationName = "";
document.getElementById("aa").style.webkitAnimation = "move 2s linear infinite";
}
//k
$(".meter > span").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
</script>

I added -webkit-transition:all 0.5s; to the .meter > span:after, .animate > span > span and it seems to work fine.
http://jsfiddle.net/VjHWr/

Have you tried with
this.style.width = "35%";

Categories

Resources