How can I properly time animations in CSS?

user_16772717 0
Viewed 85

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 class="extremebig">hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
  </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?

css-animations viewport css html javascript
4 Answers

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 class="extremebig">hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
  </body>
</html>
user_189294100

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

user_188844890

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.

user_124520530

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.

user_189294760
Related