Home>

Newbie. I make animation for the object. Faced one problem: all animations are played on page load, but I need them to play when an object hits the screen. How can i do this? Some code:

@keyframes to-right {
    0% {transform: translate (-500px);}
    100% {transform: translate (0px);}
}
@keyframes to-left {
    0% {transform: translate (500px);}
    100% {transform: translate (0px);}
}
.animated-block1 {
    width: 250px;
    height: 250px;
    animation: to-right 2.5s;
}
.animated-block2 {
    width: 250px;
    height: 250px;
    animation: to-left 2.5s;
} 
<
! DOCTYPE html >
<
html >
<
body >
  <
div class= "animated-block1" style= "background-color: rgb (0, 0, 0);" >
  <
/div >
  <
div class= "animated-block2" style= "background-color: rgb (255, 0, 0);" >
  <
/div >
<
/body >
<
/html >

developer.mozilla.org /ru /dox /Web /API /Intersession_Observer_API

soledar102021-10-17 03:21:10

Which object should hit the screen? I did not understand the essence of the question=)

Хмельни́цький2021-10-17 03:21:10

@Khmelnitsky, each object should play an animation when it hits the screen, but if the object has not yet hit the screen, then the animation should not be played

Ferret0072021-10-17 03:21:10

So your code is moving the object across the screen, so you need to remove this animation? You do not understand your thoughts.

Хмельни́цький2021-10-17 03:21:10