Why the css animation (without JS) ist not working?

user_11844600 0
Viewed 68

The last element move unproportionally faster than another elements. I don't how to make the @keyframes last 25%. I want to test the result and use it to make the text slider.

https://codepen.io/fredunit/pen/MWKyBrL?editors=1100

.slide1 {animation: slide1 16s infinite;}
.slide2 {animation: slide2 16s infinite;}
.slide3 {animation: slide3 16s infinite;}
.slide4 {animation: slide4 16s infinite;}


@keyframes slide1 {
  0% {opacity: 1;}
  5% {opacity: 0.5;}
  10% {opacity: 0.1;}
  15% {opacity: 0;}
  50%{opacity: 0;}
  66.6% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide2 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 1;}
  45%{opacity: 0;}
  66.6% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 0;}
  45%{opacity: 0;}
  50% {opacity: 1;}
  70%{opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slide4 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 0;}
  45%{opacity: 0;}
  50% {opacity: 0;}
  75%{opacity: 1;}
  80%{opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}
<section id="projects">
          <div class="showcase">
           <div class="wrapper">
          <div class="slide1">Tribute Page</div>
          <div class="slide2">Survey Form</div>
            <div class="slide3">Technical  Documentation Page</div>
          <div class="slide4">Landing Page</div>
            </div>
              </div>

animation css
2 Answers

You have 4 texts so each one should be visible 25% of the time. Combine that with animation-delay and I think you'll get the desired result. I also added opacity to hide the texts before their animations start.

.slide1 {animation: slide 16s infinite; animation-delay: 0s; opacity: 0;}
.slide2 {animation: slide 16s infinite; animation-delay: 4s; opacity: 0;}
.slide3 {animation: slide 16s infinite; animation-delay: 8s; opacity: 0;}
.slide4 {animation: slide 16s infinite; animation-delay: 12s; opacity: 0;}

@keyframes slide {
0% {opacity: 0;}
12.5% {opacity: 100;}
25% {opacity: 0;}
100% {opacity: 0;}
}
<section id="projects">
<div class="showcase">
    <div class="wrapper">
        <div class="slide1">Tribute Page</div>
        <div class="slide2">Survey Form</div>
        <div class="slide3">Technical  Documentation Page</div>
        <div class="slide4">Landing Page</div>
    </div>
</div>

user_6695760

You can simplify the @keyframes directives to:

@keyframes slide1 {
  25%, 90% {opacity: 0;}
  0%, 15% {opacity: 1;}
}

@keyframes slide2 {
  0%, 15%, 50%, 100% {opacity: 0;}
  25%, 40% {opacity: 1;}
}

@keyframes slide3 {
  0%, 40%, 75%, 100% {opacity: 0;}
  50%, 65% {opacity: 1;}
}

@keyframes slide4 {
  0%, 65%, 100% {opacity: 0;}
  75%, 90% {opacity: 1;}
}

I have speeded up the animation a little, but here is a working example:

.slide1 {animation: slide1 8s infinite;}
.slide2 {animation: slide2 8s infinite;}
.slide3 {animation: slide3 8s infinite;}
.slide4 {animation: slide4 8s infinite;}

@keyframes slide1 {
  25%, 90% {opacity: 0;}
  0%, 15% {opacity: 1;}
}

@keyframes slide2 {
  0%, 15%, 50%, 100% {opacity: 0;}
  25%, 40% {opacity: 1;}
}

@keyframes slide3 {
  0%, 40%, 75%, 100% {opacity: 0;}
  50%, 65% {opacity: 1;}
}

@keyframes slide4 {
  0%, 65%, 100% {opacity: 0;}
  75%, 90% {opacity: 1;}
}
<section id="projects">
  <div class="showcase">
    <div class="wrapper">
      <div class="slide1">Tribute Page</div>
      <div class="slide2">Survey Form</div>
      <div class="slide3">Technical  Documentation Page</div>
      <div class="slide4">Landing Page</div>
    </div>
  </div>
</section>

user_38977750
Related