我如何在CSS中正确正确的时间动画?

发布于 01-23 14:52 字数 754 浏览 2 评论 0原文

我计划建立一个网站,但我似乎找不到任何时间来计算动画的时间。这是一个例子:

<!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>

我的计时想法是,只有在网站访问者可见时,苹果才开始出现。 你们有什么想法吗?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

掩于岁月 2025-01-30 14:52:08

您可以使用CSS animation-delay。下面的代码应起作用。

<!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>

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>
葬心 2025-01-30 14:52:08

下面的代码应起作用:

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);

如果这不起作用,请告诉我,我会尽力为您提供更多帮助。 :)

source

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

南城追梦 2025-01-30 14:52:08

对于该特定情况,您需要确定用户滚动到放置Apple的区域的滚动,如果他这样做,则可以将类添加到元素以显示它。当您将类添加到元素中时,动画将自动启动。

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.

同展鸳鸯锦 2025-01-30 14:52:08

我认为您正在尝试实现这样的目标: https://codepen.io/tateishir-tateishiishi- 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');
                }
            });
        }

您可以使用他的功能检查视口是否可见元素。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文