I added it to a shortcut function in wordpress functions.php , and was all working fine. Just checked it again, and it works perfectly on one page (scroll to the bottom), but doesn’t on another, and I’ve got no idea why!

Any thoughts?

HTML:

    <div class="dicerollingwrapper">
  <div class="dicebox dicetransform">
    <svg id="dicesvg" viewBox="0 0 200 200" xmlns="https://www.w3.org/2000/svg">
      <style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;} 
      .dicetextfirst {font: 70px serif; fill: white;}    
      </style>
    <path class="dicetospin"  d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text> 

  </svg>
</div>

CSS:

.dicebox {
  /* background-color: #ff8D9B; */
  height: 300px;
  width: 300px;
}

.dicetransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetransform-active {
  animation-name: rotate;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  100% {transform:rotate(4320deg); }
} 

.dicetexttransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetexttransform1-active {
  animation: hidecolor 4s forwards;
}

@keyframes hidecolor {
  0% { fill: white; }
  100% {fill-opacity:0;}
}

.dicetexttransform2-active {
  animation: showcolor 4s forwards;
}

@keyframes showcolor {
  0% {fill-opacity:0;}
  100% {fill-opacity:1;fill: white;}
}

#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}

JS:

JQuery("#dicebutton").click(function() {
JQuery('.dicetransform').toggleClass('dicetransform-active'); 

  // generate random
  let x = Math.floor((Math.random() * 13) + 1);
  //find SVG elements
  var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
  var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
  //set number
  numberdiceSVG.textContent = x;
  // reset if animated already done
  if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
    numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
  }
  else {
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');

numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
  }

var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');

  });

Thanks for your answer.
Best

I want to apply this animated background to one of my pages, but I don’t know where to start. Where should I paste the html and css components? And how to target only this one page?

I am using Gutenberg with Malina theme. Is there an option to add html & css for my animation without using additional plug-ins?

Thank you

I made a grid of the latest posts with the Stackable plugin and I added a keyframed animation with the CSS below. The animation works perfect when the page is loaded but I can’t figure out how to make the animation start when the grid is appearing in the viewport. I tried different javascript solutions but somehow it never works for me in wordpress.

Any help would be awesome
thanks

.ugb-blog-posts__item {
	animation: fadein 1s ease-out normal backwards;
}
.ugb-blog-posts__item:nth-child(1) {	 animation-delay: 0; }
.ugb-blog-posts__item:nth-child(2) {	 animation-delay: 200ms; }
.ugb-blog-posts__item:nth-child(3) {	 animation-delay: 400ms; }
.ugb-blog-posts__item:nth-child(4) {	 animation-delay: 600ms; }
.ugb-blog-posts__item:nth-child(5) {	 animation-delay: 800ms; }
.ugb-blog-posts__item:nth-child(6) {	 animation-delay: 1000ms; }
.ugb-blog-posts__item:nth-child(7) {	 animation-delay: 1200ms; }
.ugb-blog-posts__item:nth-child(8) {	 animation-delay: 1400ms; }
.ugb-blog-posts__item:nth-child(9) {	 animation-delay: 1600ms; }
.ugb-blog-posts__item:nth-child(10) {	 animation-delay: 1800ms; }
.ugb-blog-posts__item:nth-child(11) {	 animation-delay: 2000ms; }
.ugb-blog-posts__item:nth-child(12) {	 animation-delay: 2200ms; }

@keyframes fadein {
		0%  	{transform:scale(0);}
		80%  	{transform:scale(1.05);}
		100% 	{transform:scale(1);}
}

Thx for any help!

The component being used is “Custom Heading” from Visual Composer by WP Bakery.

https://78d.37a.myftpupload.com – go to “What We Do” and then any of those pages. You’ll notice page and section headers do not appear.

Btw, I can’t update the theme.

li:hover > ul{
    display:block;
    -moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation:fadeIn  .3s ease-in ;

}

ul li:hover > ul{
    display:block;
    -moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation: fadeIn .3s ease-in;
}

I can’t put a link because I am editing the site with a localhost.