time animation with css

Asked

Viewed 71 times

0

good afternoon, I need to do an animation similar to the one in the video https://www.youtube.com/watch?v=OKo0RMtZ7g4&feature=youtu.be.

But I can’t seem to adjust the time.

 .container {
height: 600px;
width: 160px;
overflow: hidden;
  }

  .centro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  }

  .parallax {
height: 600px;
width: 160px;
background-image: url('img/intel_hybrid_160_bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: scroll;

  }

  .logo {
position: absolute;
top: 95%;
left: 70%;
transform: translate(-95%, -100%);
  }

  .titulo1 {
position: absolute;
top: 40%;
left: -100%;
list-style: none;
animation: teste 0.3s ease-out both;
  }

  @-webkit-keyframes teste {
0% {
  top: 40%;
  left: -100%;
  transform: translate(-50%, -50%);
}

100% {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  }



  .titulo2 {
position: absolute;
top: 50%;
left: -100%;
list-style: none;
animation-name: teste2;
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-out both;
animation-fill-mode: forwards;
animation-delay: 0.3s;
  }

  @-webkit-keyframes teste2 {
0% {
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
}

100% {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
  }


  .titulo3 {
position: absolute;
top: 60%;
left: -100%;
list-style: none;
animation-name: teste3;
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-out both;
animation-fill-mode: forwards;
animation-delay: 0.6s;
  }

  @-webkit-keyframes teste3 {
0% {
  top: 60%;
  left: -100%;
  transform: translate(-50%, -50%);
}

100% {
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
  }



  .kenburns-top {
-webkit-animation: kenburns-top 5s ease-out both;
animation: kenburns-top 5s ease-out both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2019-2-18 15:14:58
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
  @-webkit-keyframes kenburns-top {
0% {
  -webkit-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  -webkit-transform-origin: 50% 16%;
  transform-origin: 50% 16%;
}

100% {
  -webkit-transform: scale(1.25) translateY(-15px);
  transform: scale(1.25) translateY(-15px);
  -webkit-transform-origin: top;
  transform-origin: top;
}
  }

  @keyframes kenburns-top {
0% {
  -webkit-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  -webkit-transform-origin: 50% 16%;
  transform-origin: 50% 16%;
}

100% {
  -webkit-transform: scale(1.25) translateY(-15px);
  transform: scale(1.25) translateY(-15px);
  -webkit-transform-origin: top;
  transform-origin: top;
}
  }
<div class="container centro">

<div class="parallax kenburns-top"></div>

<div class="logo">
  <img src="img/intel_hybrid_160_logo.png" class="logo" alt="">
</div>

<ul class="">
  <li><img src="img/intel_hybrid_160_copy1a.png" class="titulo1" id="titulo-1"></li>
  <li><img src="img/intel_hybrid_160_copy1b.png" class="titulo2" id="titulo-2"></li>
  <li><img src="img/intel_hybrid_160_copy1c.png" class="titulo3" id="titulo-3"></li>
</ul>



  </div>

javascript html5 css3

  • Which exactly?

  • I have three classes, title 1, title 2 and title 3. would like that as soon as titulo1 enters it takes 1 second and enter titulo2, 1 according to titulo3 and then 3 gives opacity: 1; ?

  • you noticed that repeats the title2, no?

  • Yes, I noticed ... but doing it in the title 1, title 2 to give me an idea. the rest is easy ... because I have 10 more titles to do it

  • Dude, I don’t understand the effect that you just said, you want me to go 1 by 1 by 1 in 1 second, until the 3 are on screen, and after that what you want to do?

  • after want to disappear from the screen, axo that would use opacity.

  • edited the question, I believe that now of to better intender.

Show 2 more comments

1 answer

0


Your code guy was a little confused, so I decided to make a model from scratch

I made that image without overflow:hidden in the container, just to help you understand better!
More below follows the code of the final version...

inserir a descrição da imagem aqui

My idea was to make a container main, in it I put a pseudo element ::after and used the property transform:scale to change the size of the "background".

Within that container I put two divs classy .box and within that div .box I put the itens. So when you give the time of animation of the children coming in I make a fadeOut of that . box using opacity, that way he disappears just like his children.

The items are aligned with a margin-left negative within the .box, and in the animation I put them back inside the .box with margin-left:0; in the item.

All the animations I did with @keyframes. To select each . box I used nth-child, just like I used to nth-child to control each of the items within the .box, thus using the value of delay of animation I managed to synchronize everything. Each child enters with a delay of 1 segundo, thus the first .box has 5 segundo and the second .box:nth-child(2) begins with a delay of 5 segundo

Follow the image code above:

* {
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 200px;
    height: 400px;
    /* border: 1px solid #000; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}
.container::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url(https://placecage.com/100/100);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: container-anima 10s linear forwards;
    transform: scale(1);
}

@keyframes container-anima {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}

.box {
    width: 100%;
    /* border: 1px solid #000; */
    position: absolute;
    animation: box-anima 1s linear forwards 4s;
}
@keyframes box-anima {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-family: sans-serif;
    font-weight: bold;
    margin-left: -200%;
    animation: item-anima 1s linear forwards 1s;
}
.item:nth-child(2) {
    animation: item-anima 1s linear forwards 2s;
}
.item:nth-child(3) {
    animation: item-anima 1s linear forwards 3s;
}
@keyframes item-anima {
    0% {
        margin-left: -200%;
    }
    100% {
        margin-left: 0%;
    }
}

.box:nth-child(2) {
    animation: box-anima 1s linear forwards 9s;
}
.box:nth-child(2) .item {
    animation: item-anima 1s linear forwards 6s;
}
.box:nth-child(2) .item:nth-child(2) {
    animation: item-anima 1s linear forwards 7s;
}
.box:nth-child(2) .item:nth-child(3) {
    animation: item-anima 1s linear forwards 8s;
}
<div class="container">
    <div class="box">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>
    <div class="box">
        <div class="item">item 1 / 2</div>
        <div class="item">item 2 / 2</div>
        <div class="item">item 3 / 2</div>
    </div>
</div>

  • 1

    guy was exactly that ... thank you so much

  • @Cool Roneyberti that worked then. Always note the delay value to adjust things if you need to. []s

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.