I have a CSS animation for a group of spans that make out a word. I am having trouble getting them to work properly. It seems on page load or refresh, they don't work. They only work after I manually save my project file.
Here is the CSS:
.word {
margin: 2rem;
}
.word span {
cursor: pointer;
display: inline-block;
font-size: 4vw;
user-select: none;
line-height: 0.8;
animation-iteration-count: 1;
}
.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}
#keyframes balance {
0%,
100% {
transform: rotate(100deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
#keyframes shrinkjump {
10%,
35% {
transform: scale(2, 0.2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
#keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}
#keyframes rotate {
20%,
80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.word span:nth-child(5).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
.word span:nth-child(6).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
.word span:nth-child(7).active {
animation: toplong 1.5s linear;
}
.word span:nth-child(8).active {
animation: balance 1.5s ease-out;
transform-origin: top left;
}
#keyframes toplong {
10%,
40% {
transform: translateY(-48vh) scaleY(1);
}
90% {
transform: translateY(-48vh) scaleY(4);
}
}
And here is the JavaScript to change the className:
const spans = document.querySelectorAll(".word span");
spans.forEach((span, idx) => {
span.addEventListener("click", (e) => {
e.target.classList.add("active");
});
span.addEventListener("animationend", (e) => {
e.target.classList.remove("active");
});
});
Does anyone have any idea why the css is behaving this way? I have experimented with a timeout and with the JavaScript to udpate the className. Thanks!
I have the following code:
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5) {
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: rgb(1, 16, 231);
color: white;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalflip"><span>Change</span><span>Text</span></h1>
</section>
I would like the text to be Sample Change and the Change alternates to Text. Right now, the text is not alternating and its on a new line whereas I would like it to be all on one line and the Sample text does not change (remains constant) but there should be a vertical flip word change on the Change and it should alternate between Text. How can I accomplish this?
This is where I got the code from: https://codepen.io/kaceyatstandcreative/pen/PowbpKm
First, there are some errors in your code:
In HTML, you're missing the </div>.
Typo at class="verticalflip" should be verticalFlip as indicated in your css
Multiple color properties in a single css #hero h1 block
After fixing those errors, your animation doesn't appear because the -webkit-text-fill-color: transparent; removes any text color. You should change it into color: transparent; in your case.
Updated:
change text to background image
remove delay between text by remove other span dependencies.
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 4s linear infinite;
-ms-animation: vertical 4s linear infinite;
-webkit-animation: vertical 4s linear infinite;
opacity: 0;
overflow: hidden;
position: absolute;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
background-position: 15% 20%;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
50% {
opacity: 1;
-moz-transform: translateY(0px);
}
70% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
70% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
50% {
opacity: 1;
-ms-transform: translateY(0px);
}
70% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div></h1>
</section>
You had some broken HTML, so I fixed that. Also replaced the spans with div because transform: rotate only works with block elements, not inline elements like span.
I animated, just by spinning the text, and not changing the opacity. I will leave that up to you if you want to add that. I also added a pause where the text isn't animated (looping from 90% to 10% with 0deg rotation).
In order to get all elements on the same row, I added display: flex to your h1, and to make the spinning text to overlay I was forced to use a grid layout, where both children are on row 1 and column 1 (grid-area). I tried position: absolute but background-clip: text didn't work on Firefox when I did that.
I increased the font size in order to show the background-clip in a better way.
[edit] Apparently, Chrome bugs out when using background-clip: text together with backface-visibility: hidden.
Working example: Firefox
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
Working example: Chrome & Safari
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
I have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>
Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</div>
I have css animation that are set on an interval to show themselves and preform when a certain time has passed. It works perfectly when you are on the website however, when you leave the website and open a new tab and come back after a couple seconds, the animation seems to restart and all the circles start all at once.
For my question, I am asking how do you set the circles to restart when the user opens a new tab and come back. Just open the codepen I will have below, open a new tab, and come back after a couple seconds and you will see the circles start all together. My code will be posted below.
Codepen
jQuery
$("#secondCircle").hide();
setInterval(function() {
$("#secondCircle").show();
$("#secondCircle").css("background-image", "linear-gradient(to top, #feada6 0%, #f5efef 100%)");
},3400);
$("#thirdCircle").hide();
setInterval(function() {
$("#thirdCircle").show();
$("#thirdCircle").css("background-image", "linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)");
},7430);
$("#fourthCircle").hide();
setInterval(function() {
$("#fourthCircle").show();
$("#fourthCircle").css("background-color", "#fd3061");
},11640);
$("#fifthCircle").hide();
setInterval(function() {
$("#fifthCircle").show();
$("#fifthCircle").css("background-image", "linear-gradient(to top, #cc208e 0%, #6713d2 100%)");
},14000);
$("#sixthCircle").hide();
setInterval(function() {
$("#sixthCircle").show();
$("#sixthCircle").css("background-image", "linear-gradient(to top, #b224ef 0%, #7579ff 100%)");
},20000);
CSS
.bubbles{
position: absolute;
z-index:0;
transform:translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
}
.bubbles li{
position: absolute;
list-style: none;
display: block;
border-radius: 100%;
animation: fadeAndScale 33s ease-in infinite;
-ms-animation: fadeAndScale 33s ease-in infinite;
-webkit-animation: fadeAndScale 26s ease-in infinite;
-moz-animation: fadeAndScale 33s ease-in infinite;
-o-animation: fadeAndScale 33s ease-in infinite;
transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
width: 1100px;
height: 1100px;
position: relative;
bottom:500px;
left: 400px;
background-image: -webkit-linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
#keyframes firstCircle {
0% {
z-index: 100;
transform: scale(0);
}
100%{
z-index: 0;
transform: scale(50);
}
}
#-moz-keyframes firstCircle {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* Webkit First Circle Animation */
#-webkit-keyframes firstCircle {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
#-ms-keyframes firstCircle {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes firstCircle {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End first circle animation -------------------------------------------------------------------------------------- */
/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
width: 1100px;
height: 1100px;
position: absolute;
left: 400px;
bottom:200px;
animation-name: secondAnimation;
}
/* Webkit Second Animation */
#-webkit-keyframes secondAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Second Animation */
#-moz-keyframes secondAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* Ms Second Animation */
#-ms-keyframes secondAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes secondAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of Second Circle ------------------------------------------------------------------------------------- */
/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
width: 1100px;
height: 1100px;
position: absolute;
left: 600px;
bottom:320px;
animation-name: thirdAnimation;
}
/* Webkit Third Animation */
#-webkit-keyframes thirdAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Third Animation */
#-moz-keyframes thirdAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Third Animation */
#-ms-keyframes thirdAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes thirdAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */
/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
width: 1100px;
height: 1100px;
position: absolute;
left: 100px;
bottom:180px;
animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
#-webkit-keyframes fourthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Fourth Animation */
#-moz-keyframes fourthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Fourth Animation */
#-ms-keyframes fourthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes fourthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */
/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
width: 1100px;
height: 1100px;
position: absolute;
left: 500px;
bottom:200px;
animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
#-webkit-keyframes fifthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
#-moz-keyframes fifthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
#-ms-keyframes fifthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes fifthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */
/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
width: 1100px;
height: 1100px;
position: absolute;
left: 700px;
bottom:150px;
animation-name: sixthAnimation;
}
/* Webkit sixth animation */
#-webkit-keyframes sixthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Sixth Animation */
#-moz-keyframes sixthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Sixth Animation */
#-ms-keyframes sixthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes sixthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
You can add a handler to the window.focus and blur event
Example (resume the animation on focus)
$(window).blur(function(){
$(".bubbles li").css({"animation-play-state":"paused"})
})
$(window).focus(function(){
$(".bubbles li").css({"animation-play-state":"running"})
})
click here for demo
Edit
To restart the animation see demo: click here
Code below
$(window).blur(function() {
$(".bubbles li").css({
"animation-play-state": "paused"
})
})
$(window).focus(function() {
$(".bubbles li").each(function() {
var clone = this.cloneNode(true);
this.parentNode.replaceChild(clone, this);
$(".bubbles li").css({
"animation-name": "firstCircle"
});
$(".bubbles li").css({
"animation-play-state": "running"
})
})
})
EDIT
I worked a little more on your animation.
Yes, the intervals were a problem.
So I complicated the code a little... To make it more simple!!! (lol)
I have set an interval which sets 6 timeouts.
The setTimeouts only add the animation class, which I call .animateD... And adjust the z-indexes.
And I no longer use the animation-play-state.
So on mouseleave, you can clear all timeouts and the interval in order to "reset" the animation to initial state. Then on mouseenter, restart the interval.
Here is a new CodePen.
Most changes are in CSS and JS:
CSS:
.bubbles{
position: absolute;
z-index:0;
transform:translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
}
.bubbles li{
position: absolute;
list-style: none;
display: block;
border-radius: 100%;
transform:scale(20);
z-index:98;
}
/* Circle animation ----------------------------- */
.bubbles li:nth-child(1) {
width: 1100px;
height: 1100px;
position: relative;
bottom:500px;
left: 400px;
background-image: -webkit-linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}
.bubbles li:nth-child(2) {
width: 1100px;
height: 1100px;
position: absolute;
left: 400px;
bottom:200px;
background-image: -webkit-linear-gradient(to top, #feada6 0%, #f5efef 100%);
background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
}
.bubbles li:nth-child(3) {
width: 1100px;
height: 1100px;
position: absolute;
left: 600px;
bottom:320px;
background-image: -webkit-linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}
.bubbles li:nth-child(4) {
width: 1100px;
height: 1100px;
position: absolute;
left: 100px;
bottom:180px;
background-color: #fd3061;
}
.bubbles li:nth-child(5) {
width: 1100px;
height: 1100px;
position: absolute;
left: 500px;
bottom:200px;
background-image: -webkit-linear-gradient(to top, #cc208e 0%, #6713d2 100%);
background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
}
.bubbles li:nth-child(6) {
width: 1100px;
height: 1100px;
position: absolute;
left: 700px;
bottom:150px;
background-image: -webkit-linear-gradient(to top, #b224ef 0%, #7579ff 100%);
background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
}
.animateD{
animation-name: CircleCSSAnimation;
animation-duration: 5.2s;
animation-iteration-count: infinite;
}
/* Mozilla Circle Animation */
#keyframes CircleCSSAnimation {
0% { transform: scale(0); }
6% { transform: scale(0); }
99%{ transform: scale(4); }
100%{ transform: scale(4); }
}
#-moz-keyframes CircleCSSAnimation {
0% { -moz-transform: scale(0); }
6% { -moz-transform: scale(0); }
99%{ -moz-transform: scale(4); }
100%{ -moz-transform: scale(4); }
}
/* Webkit First Circle Animation */
#-webkit-keyframes CircleCSSAnimation {
0% { -webkit-transform: scale(0); }
6% { -webkit-transform: scale(0); }
99%{ -webkit-transform: scale(4); }
100%{ -webkit-transform: scale(4); }
}
#-ms-keyframes CircleCSSAnimation {
0% { -ms-transform: scale(0); }
6% { -ms-transform: scale(0); }
99%{ -ms-transform: scale(4); }
100%{ -ms-transform: scale(4); }
}
#-o-keyframes CircleCSSAnimation {
0% { -o-transform: scale(0); }
6% { -o-transform: scale(0); }
99%{ -o-transform: scale(10); }
100%{ -o-transform: scale(10); }
}
JS:
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;
var intervalsSetting = function(num){
console.log("SETTING");
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(5).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(0).addClass("animateD").css({"z-index":100});
console.log("1");
timeout2 = setTimeout(function(){
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(0).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(1).addClass("animateD").css({"z-index":100});
console.log("2");
},5000);
timeout3 = setTimeout(function(){
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(1).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(2).addClass("animateD").css({"z-index":100});
console.log("3");
},10000);
timeout4 = setTimeout(function(){
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(2).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(3).addClass("animateD").css({"z-index":100});
console.log("4");
},15000);
timeout5 = setTimeout(function(){
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(3).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(4).addClass("animateD").css({"z-index":100});
console.log("5");
},20000);
timeout6 = setTimeout(function(){
$(".bubbles li").css({"z-index":0});
$(".bubbles li").eq(4).removeClass("animateD").css({"z-index":99});
$(".bubbles li").eq(5).addClass("animateD").css({"z-index":100});
console.log("6");
},25000);
};
intervalsSetting();
var myInterval = setInterval(function(){
intervalsSetting();
},30000);
var mouseISin=true;
$("body").on("mouseleave",function(){
console.log("MOUSE IS OUT");
mouseISin=false;
$(".bubbles li").removeClass("animateD");
clearTimeout(timeout2);
clearTimeout(timeout3);
clearTimeout(timeout4);
clearTimeout(timeout5);
clearTimeout(timeout6);
clearInterval(myInterval);
$(".bubbles li").css({"z-index":0});
});
$("body").on("mouseenter",function(){
if(!mouseISin){
console.log("MOUSE IS IN");
mouseISin=true;
clearInterval(myInterval);
intervalsSetting();
myInterval = setInterval(function(){
intervalsSetting();
},30000);
}
});
First answer
When user opens or clicks on another tab...
The mouse left the body.
I think it could be the rigth moment to pause the animation.
And resume it when the mouse comes back over the body.
CodePen
$("body").on("mouseleave",function(){
console.log("MOUSE IS OUT");
$(".bubbles li").css({"animation-play-state":"paused"})
});
$(window).on("mouseenter",function(){
console.log("MOUSE IS IN");
$(".bubbles li").css({"animation-play-state":"running"})
});
Well after long months of figuring it out I finally fixed it.
The problem was the Query setInterval function.
So I just removed it and made a "animation-delay", and other functions, in my css for all the circles.
And now it works perfectly.
I believe the setInterval was making it restart when you leave the tab so the css fixed it.
I will add the code for others who might come across this problem.
CSS
.bubbles{
position: absolute;
z-index:0;
transform:translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
}
.bubbles li{
list-style: none;
border-radius: 50%;
animation: fadeAndScale 26s ease-in infinite;
-ms-animation: fadeAndScale 26s ease-in infinite;
-webkit-animation: fadeAndScale 26s ease-in infinite;
-moz-animation: fadeAndScale 26s ease-in infinite;
-o-animation: fadeAndScale 26s ease-in infinite;
transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
width: 1100px;
height: 1100px;
position: relative;
bottom:500px;
left: 0%;
background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
background: -ms-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
background: -o-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
background: -moz-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
#keyframes firstCircle {
0% {
z-index: 100;
transform: scale(0);
}
100%{
z-index: 0;
transform: scale(50);
}
}
#-moz-keyframes firstCircle {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* Webkit First Circle Animation */
#-webkit-keyframes firstCircle {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
#-ms-keyframes firstCircle {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes firstCircle {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End first circle animation -------------------------------------------------------------------------------------- */
/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
width: 1100px;
height: 1100px;
position: absolute;
left: 20%;
bottom:50%;
animation-name: secondAnimation;
visibility: hidden;
animation-delay: 3.4s;
}
/* Webkit Second Animation */
#-webkit-keyframes secondAnimation {
0% {
visibility: visible;
background: linear-gradient(45deg, #F14545 0%, #E7219B 100%);
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Second Animation */
#-moz-keyframes secondAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* Ms Second Animation */
#-ms-keyframes secondAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes secondAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of Second Circle ------------------------------------------------------------------------------------- */
/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
width: 1100px;
height: 1100px;
position: absolute;
left:70%;
bottom:35%;
visibility: hidden;
animation-delay: 7.4s;
animation-name: thirdAnimation;
}
/* Webkit Third Animation */
#-webkit-keyframes thirdAnimation {
0% {
visibility: visible;
background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Third Animation */
#-moz-keyframes thirdAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Third Animation */
#-ms-keyframes thirdAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes thirdAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */
/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
width: 1100px;
height: 1100px;
position: absolute;
left: 20%;
bottom:60%;
visibility: hidden;
animation-delay: 11.6s;
animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
#-webkit-keyframes fourthAnimation {
0% {
visibility: visible;
background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Fourth Animation */
#-moz-keyframes fourthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Fourth Animation */
#-ms-keyframes fourthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes fourthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */
/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
width: 1100px;
height: 1100px;
position: absolute;
left: 60%;
bottom:70%;
visibility: hidden;
animation-delay: 14s;
animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
#-webkit-keyframes fifthAnimation {
0% {
visibility: visible;
background: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
#-moz-keyframes fifthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
#-ms-keyframes fifthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes fifthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */
/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
width: 1100px;
height: 1100px;
position: absolute;
left: 70%;
bottom:25%;
visibility: hidden;
animation-delay: 15s;
animation-name: sixthAnimation;
}
/* Webkit sixth animation */
#-webkit-keyframes sixthAnimation {
0% {
visibility: visible;
background-color: linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}
/* Mozilla Sixth Animation */
#-moz-keyframes sixthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(50);
}
}
/* MS Sixth Animation */
#-ms-keyframes sixthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(50);
}
}
#-o-keyframes sixthAnimation {
0% {
z-index: 100;
-o-transform: scale(0);
}
100%{
z-index: 0;
-o-transform: scale(50);
}
}
/* End of Sixth Animation ---------------------------------------------------------------------------------------------- */
Trying to Slide only h3 (not whole slider) bounceInLeft using Animate.CSS but it's working only Chrome,opera but not working on Firefox browser.
See this Fiddle > on Chrome, then Firefox.
CSS:
/******************
* Bounce in Left *
*******************/
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-1000px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-1000px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-1000px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-1000px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
/****************
* bounceInRight *
****************/
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(1000px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(1000px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(1000px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(1000px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
/* Description */
#headslide p {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);
margin:0;
}
/* Title */
#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}
This Slider has a fade transition by default, so it shows fade transitions on Firefox and my bounceInLeft/bounceInRight keyframes only work on Chrome and Opera.
I'm only trying to slide h3, and not the entire Slider.
Why does Animate.css not work on Firefox? How can I fix this? Is it possible to fix this using jQuery? Thanks.