Is it possible to do this animation with pure CSS3 without Javascript? - javascript

This is a very simple background color change animation. Is it possible to do that using pure CSS3?
var square = document.querySelector('.square');
var percentYellow = 0;
function changeBackground(){
percentYellow = percentYellow + 10;
square.style.background = 'linear-gradient(90deg, yellow '+percentYellow+'%, blue 0)';
if(percentYellow<=100){
setTimeout(changeBackground,200);
}
}
changeBackground();
.square{
width:300px;
height:300px;
background:linear-gradient(90deg, yellow 0%, blue 0);
border:1px solid;
}
<div class="square"></div>


You can animate the background-position:
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 50%, blue 0);
background-size: 200% 100%;
background-position: 100% 0;
border: 1px solid;
animation: slideBG 2s linear forwards;
}
#keyframes slideBG {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
<div class="square"></div>
Or, as #Harry pointed out, you can use steps() to maintain the "stepped" transition that your javascript version produces:
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 50%, blue 0);
background-size: 200% 100%;
background-position: 100% 0;
border: 1px solid;
animation: slideBG 2s steps(10, end) forwards;
}
#keyframes slideBG {
to {
background-position: 0 0;
}
}
<div class="square"></div>


Yes, it's possible. You can make the .square element blue, and ::after pseudo-element yellow, and then animate the width of ::after:
#keyframes animation {
from {
width: 0;
}
to {
width: 300px;
}
}
.square {
width: 300px;
height: 300px;
background-color: blue;
border: 1px solid;
}
.square::after {
content: "";
display: block;
width: 300px;
height: 300px;
background-color: yellow;
animation: animation 1s;
}
<div class="square"></div>


You can use css animation and you need to set animation-fill-mode: forwards; to retain the final animation style otherwise it will rollback to the initial style.
animation-fill-mode: forwards -The target will retain the computed values set by the last keyframe encountered during execution.(Taken from here)
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 0%, blue 0);
border: 1px solid;
animation: anim 2s;
animation-fill-mode: forwards; /* retain the css applied by animation */
}
#keyframes anim {
0% { background: linear-gradient(90deg, yellow 0%, blue 0); }
10% { background: linear-gradient(90deg, yellow 10%, blue 0); }
20% { background: linear-gradient(90deg, yellow 20%, blue 0); }
30% { background: linear-gradient(90deg, yellow 30%, blue 0); }
40% { background: linear-gradient(90deg, yellow 40%, blue 0); }
50% { background: linear-gradient(90deg, yellow 50%, blue 0); }
60% { background: linear-gradient(90deg, yellow 60%, blue 0); }
70% { background: linear-gradient(90deg, yellow 70%, blue 0); }
80% { background: linear-gradient(90deg, yellow 80%, blue 0); }
90% { background: linear-gradient(90deg, yellow 90%, blue 0); }
100% { background: linear-gradient(90deg, yellow 100%, blue 0); }
}
<div class="square"></div>


Try something like this
.contain{
width:400px;
height:400px;
border:solid 1px black;
background-color:blue;
position:relative;
}
.overcontain{
width:100%;
height:100%;
background-color:yellow;
animation:anime 2s linear;
position:absolute;
}
#keyframes anime{
0%{width:0%;}
100%{width:100%;}
}
<div class="contain">
<div class="overcontain"></div>
</div>


It can be done with CSS only
.square{
width:300px;
height:300px;
background:linear-gradient(90deg, yellow 0%, blue 0);
border:1px solid;
animation-name: slide;
animation-duration: 4s;
}
#keyframes slide {
0% { background:linear-gradient(90deg, yellow 0%, blue 0); }
10% { background:linear-gradient(90deg, yellow 10%, blue 0); }
20% { background:linear-gradient(90deg, yellow 20%, blue 0); }
/* and so on ... */
100% { background:linear-gradient(90deg, yellow 100%, blue 0); }
}
http://codepen.io/anon/pen/pyMYWz?editors=1100#anon-signup


Edit: Others has beaten me and answered while I was typing this, but since I included a link to a documentation that nobody else mentioned I'm going to post this anyway.
You can create animations using only CSS3 with the #keyframes rules and animation-* properties.
See http://www.w3schools.com/css/css3_animations.asp for reference.
Here is a little snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.square{
width:100px;
height:100px;
background:linear-gradient(90deg, yellow 0%, blue 0%);
border:1px solid;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background:linear-gradient(90deg, yellow 0%, blue 0%)}
25% {background:linear-gradient(90deg, yellow 25%, blue 0%)}
50% {background:linear-gradient(90deg, yellow 50%, blue 0%)}
75% {background:linear-gradient(90deg, yellow 75%, blue 0%)}
100% {background:linear-gradient(90deg, yellow 100%, blue 0%)}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Note: There is a mess regarding vendors with these properties/rules and due that I couldn't get it working (tried it on Firefox 44). And to keep it simple I used only the default sintax. I hope it can shed some light on this at least.
Edit: Possibly I couldn't get it working due the fact mentioned in comments here.


You can just set how many steps you want to realize.
.square{
width:300px;
height:300px;
background:blue;
border:1px solid;
position: relative;
}
.square:before{
content: '';
display: block;
position: absolute;
background: yellow;
display:block;
left: 0;
top:0;
bottom:0;
right: 100%;
-webkit-animation: play 2s steps(10);
-moz-animation: play 2s steps(10);
-ms-animation: play 2s steps(10);
-o-animation: play 2s steps(10);
animation: play 2s steps(10);
}
#-webkit-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-moz-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-ms-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-o-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
<div class="square"></div>

Related

Really Slow CSS Animations (worse on Chrome browsers)

I am having issues with lag when using a combination of two CSS animations. The first one animates text shadow on a text, and the second animation is animating two SVG's in the background. On Firefox it doesn't lag very much, but on Chrome it's really bad. Here is a video of it.
Here is a snippet:
/*NEON TEXT CODE*/
#flicker {
animation: flicker-text 1.5s infinite alternate;
font-size: 36px;
color: white;
}
#keyframes flicker-text {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #B0D9DD, 0 0 80px #B0D9DD, 0 0 90px #B0D9DD, 0 0 100px #B0D9DD, 0 0 150px #B0D9DD;
}
20%,
24%,
55% {
text-shadow: none;
}
}
/*OCEAN AND WAVE CODE*/
#ocean-container-vs-code {
position: fixed;
top: 0;
left: 0;
z-index: -9999;
height: 100%;
width: 100%;
}
.ocean {
height: 5%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #015871;
}
.wave {
background: url(//dd7tel2830j4w.cloudfront.net/f1659025056348x434203136138475760/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
-webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
-webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#-webkit-keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#-webkit-keyframes swell {
0%,
100% {
transform: translate3d(0, -25px, 0);
}
50% {
transform: translate3d(0, 5px, 0);
}
}
#keyframes swell {
0%,
100% {
transform: translate3d(0, -25px, 0);
}
50% {
transform: translate3d(0, 5px, 0);
}
}
<div id="ocean-container-vs-code" style="background:linear-gradient(90deg, #faf0cd, #fab397)">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
<p id="flicker">This is some test text</p>
Does anyone have any insight on why combining these two animations causes severe lag? What am I doing wrong here?
Thanks so much!
EDIT: Pay attention to when the text flickers. On the moment the text flickers, the waves lag.

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 .

positioning of an SVG based on the animation SVG

I'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>

I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>

Synchronize CSS Animation

is there any possibility to synchronize CSS Animation? E.g.,
I have this animation:
#keyframes AnimatedGradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
And I apply it with this class to any element that I want:
.animated-gradient {
background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
background-size: 3200% 3200%;
animation: AnimatedGradient 160s linear infinite;
}
If I apply it to the 2 or more elements, e.g., the first one is background (body tag) and the other one is button on hover, so when I hover on it the animation is starting from the start, but I want it to be synchronized with the background. So how can I do that? Preferably using plain JavaScript. Thanks!

Maybe you can make the background of button transparent on hover.
Below snippet might help. In the snippet, I have given a thick border to the button to make the button visible while hovering but you can use different techniques (like clipping or stack button in between divs) which is suitable as per your code.
#keyframes AnimatedGradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.animated-gradient {
background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
background-size: 3200% 3200%;
animation: AnimatedGradient 160s linear infinite;
}
body {
text-align: center;
margin: 0;
padding: 0;
}
.btn {
background-color: #000;
color: #fff;
padding: 10px;
transition-duration: 0.4s;
transition-timing-function: ease;
border-top: solid 25px #fff;
border-bottom: solid 25px #fff;
border-left: solid 150px #fff;
border-right: solid 150px #fff;
margin-top: 50px;
}
.btn:hover {
background-color: transparent;
color: #fff;
transition-duration: 0.4s;
transition-timing-function: ease;
}
<html>
<body class="animated-gradient">
<div>
<button class="btn">Hover Me!</button>
</div>
</body>
</html>

How to make the slider move right and left alternatively

The slider i have is moving from to left side automatically and once it reaches it moves the first slider and then it repeats.
All i wanted to do is to make the slider right to left and then to left to right alternatively.
How can i do this ?
Here is my Fiddle.
Here is the css
#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
As i don't have any idea in javascript i am not able to have any steps.

Your current animation keyframes:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
it goes from 0 to -100% to -200% .. -300% and than back to 0.
you can change it to something like this:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: 0 }
75%, 95% { left: -100% }
}
here it will just got back and forth between 0 and -100%.
Show more than 2 slides:
Add classes to your slides to be able to hide and show them and created these keyframes to do so:
#-webkit-keyframes slider1 {
0%, 20%, 100% { opacity: 1; display: block; visibility: visible; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider2 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 1; display: block; visibility: visible; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider3 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 1; display: block; visibility: visible; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider4 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 1; display: block; visibility: visible; }
}
now you just need to position slide 3 where 1 is and 4 where 2 is, since you have a fixed width i just used position: relative; and add the animation keyframes (don't forget the other prefixes)
#slideshow .slide_1 {
-webkit-animation: slider1 32s infinite;
}
#slideshow .slide_2 {
-webkit-animation: slider2 32s infinite;
}
#slideshow .slide_3 {
position: relative;
left: -1280px;
-webkit-animation: slider3 32s infinite;
}
#slideshow .slide_4 {
position: relative;
left: -1280px;
-webkit-animation: slider4 32s infinite;
}
the finished Fiddle

Categories

Resources