How can I properly time animations in CSS?-CodePudding

I planned on building a website and I don't seem to find any way to time the animations. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image {
        animation-name: appear;
        animation-duration: 5s;
      }
      
      .extremebig {
        font-size: 200px;
      }
      
      @keyframes appear {
        0% {opacity: 0;}
        100% {opacity: 1.0;}
      }
    </style>
  </head>
  <body>
    <p >hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" />
  </body>
</html>

My idea of timing it is that the apple only starts appearing when it is visible to the visitor of the website. Do you guys have any idea?

CodePudding user response：

You can use the CSS animation-delay. The code below should work.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image {
        animation-name: appear;
        animation-duration: 5s;
        animation-delay: /* However long you want the delay to be */;
      }
      
      .extremebig {
        font-size: 200px;
      }
      
      @keyframes appear {
        0% {opacity: 0;}
        100% {opacity: 1.0;}
      }
    </style>
  </head>
  <body>
    <p >hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" />
  </body>
</html>

CodePudding user response：

The code below should work:

function reveal() {
  var reveals = document.querySelectorAll(".image");

  for (var i = 0; i < reveals.length; i  ) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

If this doesn't work, let me know and I'll try help you some more. :)

Source

CodePudding user response：

for that specific case you need to determine did user scrolled to the area where you placed apple, and If he did, you can add class to element to display it. When you add class to the element, animation will automatically start.

CodePudding user response：

I think you're trying to achieve something like this: https://codepen.io/tateishi-e/pen/xaEJxw

function Utils() {}
        Utils.prototype = {
            constructor: Utils,
            isElementInView: function (element, fullyInView) {
                var pageTop = $(window).scrollTop();
                var pageBottom = pageTop   $(window).height();
                var elementTop = $(element).offset().top;
                var elementBottom = elementTop   $(element).height();

                if (fullyInView === true) {
                    return ((pageTop < elementTop) && (pageBottom > elementBottom));
                } else {
                    return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
                }
            }
        };

        var Utils = new Utils();
        $(window).on('load', addFadeIn());
        
        $(window).scroll(function() {
            addFadeIn(true);
        });

function addFadeIn(repeat) {
            var classToFadeIn = ".will-fadeIn";
            
            $(classToFadeIn).each(function( index ) {
                var isElementInView = Utils.isElementInView($(this), false);
                if (isElementInView) {
                    if(!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
                        if(index % 2 == 0) $(this).addClass('fadeInRight');
                        else $(this).addClass('fadeInLeft');
                    }
                } else if(repeat) {
                    $(this).removeClass('fadeInRight');
                    $(this).removeClass('fadeInLeft');
                }
            });
        }

You can use his function to check if the element is visible to the viewport.