지연 애니메이션으로 CSS 만

Question 1

나는 다음 코드는 회전하는 단어로 CSS 애니메이션이다. 나는 방법을 알아 내려고 노력하고 애니메이션을 일시 중지에서 각각의 단어로 옮기기 전에 다음 단어입니다. 해봤을 사용하여 animation-delay지만,그만 적용됩의 시작 애니메이션보다는 각각의 항목입니다.

는 방법은 애니메이션을 일시 중지에 대한 각각의 단어가?

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

@keyframes move {
  0% {
    transform: translateY(0%);
  }

  20% {
    transform: translateY(-100%);
  }

  40% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-300%);
  }

  80% {
    transform: translateY(-400%);
  }

  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

는 방법은 애니메이션을 일시 중지에 대한 각각의 단어가?

Question 2

유지할 필요가 동일한 변형의 커플의 순간 그때 트리거음. 시기 바랍에 따라 아래 코드고 당신이 무슨 뜻인지 이해합니다.

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

/* Here is the different */
@keyframes move {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-100%);
  }
  20% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(-200%);
  }
  40% {
    transform: translateY(-200%);
  }
  50% {
    transform: translateY(-300%);
  }
  60% {
    transform: translateY(-300%);
  }
  70% {
    transform: translateY(-400%);
  }
  80% {
    transform: translateY(-400%);
  }
  90% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

Question 3

지연만 작동하면서 시작합니다. 그래서 작동하지 않으로 여러 번 반복합니다. 를 추가할 필요가 빈 프레임을 좋아하고 매력적인 곳을 찾는 여행객들에게 suggestd.
여기에는 스레드에 대한 동일한 항목: CSS 애니메이션에서 지연의 반복

당신이 무엇을 하려고 하는 일종의 수직 회전목마 등이 있습니다. 보 CSS 만 회전 목마. 다음 예는,용도를 변경할 수 있습을 슬라이드로 당신의 텍스트입니다. 당신을 조정할 필요가 애니메이션 slideMe 을 변경할 일시 중지 시간입니다. 클릭하에서'전체 페이지에 표시됩니다.

A codepen demo:

<iframe height="400px" style="width: 100%;" scrolling="no" title="CSS only - A scalable auto sliding carousel -vertical" src="https://codepen.io/onkarruikar/embed/RwZzrMp?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true"
  allowfullscreen="true">
  See the Pen <a href="https://codepen.io/onkarruikar/pen/RwZzrMp">
  CSS only - A scalable auto sliding carousel -vertical</a> by OnkarRuikar (<a href="https://codepen.io/onkarruikar">@onkarruikar</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Feroz · Answer 1 · 2021-11-24T04:23:29

유지할 필요가 동일한 변형의 커플의 순간 그때 트리거음. 시기 바랍에 따라 아래 코드고 당신이 무슨 뜻인지 이해합니다.

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

/* Here is the different */
@keyframes move {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-100%);
  }
  20% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(-200%);
  }
  40% {
    transform: translateY(-200%);
  }
  50% {
    transform: translateY(-300%);
  }
  60% {
    transform: translateY(-300%);
  }
  70% {
    transform: translateY(-400%);
  }
  80% {
    transform: translateY(-400%);
  }
  90% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

감사합니다,그래서 내가 원하는 경우 추가 더 이상 지연/일시 정지,나는 그냥 계속 더 추가하는 키프레임 포인트입니까?

onkar ruikar · Answer 2 · 2021-11-24T07:23:34

지연만 작동하면서 시작합니다. 그래서 작동하지 않으로 여러 번 반복합니다. 를 추가할 필요가 빈 프레임을 좋아하고 매력적인 곳을 찾는 여행객들에게 suggestd.
여기에는 스레드에 대한 동일한 항목: CSS 애니메이션에서 지연의 반복

당신이 무엇을 하려고 하는 일종의 수직 회전목마 등이 있습니다. 보 CSS 만 회전 목마. 다음 예는,용도를 변경할 수 있습을 슬라이드로 당신의 텍스트입니다. 당신을 조정할 필요가 애니메이션 slideMe 을 변경할 일시 중지 시간입니다. 클릭하에서'전체 페이지에 표시됩니다.

A codepen demo:

<iframe height="400px" style="width: 100%;" scrolling="no" title="CSS only - A scalable auto sliding carousel -vertical" src="https://codepen.io/onkarruikar/embed/RwZzrMp?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true"
  allowfullscreen="true">
  See the Pen <a href="https://codepen.io/onkarruikar/pen/RwZzrMp">
  CSS only - A scalable auto sliding carousel -vertical</a> by OnkarRuikar (<a href="https://codepen.io/onkarruikar">@onkarruikar</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

지연 애니메이션으로 CSS 만

질문

는 방법은 애니메이션을 일시 중지에 대한 각각의 단어가?

는 방법은 애니메이션을 일시 중지에 대한 각각의 단어가?

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리