How to use CSS animation-delay and transform?

Question

How can I use setinterval() for css animation?

For example, in the example below, I want the div to come with animation after 3000ms. How do I do this?

Can I get it starting from bottom 0, like the price segment that changes when I choose the minute and day as on this page?

<div><span>$</span>2.000</div>

jsfiddle example

div {
  font-size: 42px;
  position: relative;
  animation: mymove 0.3s;
  animation-timing-function: ease-in-out;
}
div span{
    font-size: 24px;
    padding-right: 5px;
}


@keyframes mymove {
  0% {
    bottom: -70px;
    }
  100% {
    bottom: 0px;
    }
}

Wais Kamal · Accepted Answer · 2021-02-13T10:07:26.940

1

Set an animation-delay, together with animation-fill-mode:forwards to prevent the div from reverting to the initial state when the animation has finished. You can use opacity to control when to show the element (I've used a dark body background here so that your white text is visible):

body {
  background: #333;
  color: #fff;
}

.wrapper {
  overflow: hidden;
}

.wrapper div {
  font-size: 42px;
  position: relative;
  animation: mymove 0.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.wrapper div span {
  font-size: 24px;
  padding-right: 5px;
}

@keyframes mymove {
  0% {
    opacity: 1;
    display: block;
    transform: translateY(-70px);
  }
  100% {
    opacity: 1;
    display: block;
    transform: translateY(0px);
  }
}

<div class="wrapper">
  <div><span>$</span>2.000</div>
</div>

edited Feb 13 '21 at 10:07

answered Feb 13 '21 at 09:32

Wais Kamal

5,858
2
17
36

yes this works but the 3000 ms div should not appear until the animation starts. How do I do this? – Ahmet Çetintaş Feb 13 '21 at 09:34
Edited. See answer. – Wais Kamal Feb 13 '21 at 09:39
Thanks it works. I made an addition to the question. Can you look at that too? – Ahmet Çetintaş Feb 13 '21 at 09:46
If you want it to start from `bottom:0` then just add that to the `0% { ... }` block and change the `100% { ... }` block as necessary. – Wais Kamal Feb 13 '21 at 09:51
Please look at the example I gave. Then you will understand. https://www.cambly.com/en/subscribe – Ahmet Çetintaş Feb 13 '21 at 09:54
so yes div bottom: will start at 0 but content will start at bottom: -70 – Ahmet Çetintaş Feb 13 '21 at 09:57
So you want it to slide in? If so, you should wrap it in a parent element and set the parent element's `overflow` to `hidden`, then use `transform:translate()` instead of `bottom`. – Wais Kamal Feb 13 '21 at 09:57
Can you show this on the example you gave, please? – Ahmet Çetintaş Feb 13 '21 at 10:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228665/discussion-between-wais-kamal-and-ahmet-cetintas). – Wais Kamal Feb 13 '21 at 10:07

How to use CSS animation-delay and transform?

1 Answers1