skip to Main Content

This is frustrating. I did this last night, and it was working fine. I cloned the project today, and it’s not working as it should.

.animatedCardEnterFromLeft {
    animation: EnterFromLeft 0.75s ease-in-out;
}

@keyframes EnterFromLeft {
    from {
        opacity: 0;
        transform: translateX(-300px);
    }

    to {
        opacity: 1;
    }
}

.animatedCardEnterFromRight {
    animation: EnterFromRight 0.75s ease-in-out;
}

@keyframes EnterFromRight {
    from {
        opacity: 0;
        transform: translateX(300px);
    }

    to {
        opacity: 1;
    }
}

These 2 are doing the exact same animation when applied to elements which is fading in from the left to right. When I change the duration of 1 of them to 5s for example, then there is a clear difference in animations. This means they are both being added to the elements as classes properly. But why are they doing the same animation?

Edit:

HTML Code

<article class="classicArticle">
                <h4>Announcements and News</h4>
                <div class="card-deck">
                    <div class="card cardFirst">
                        <img class="card-img-top" src="images/advising.jpg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/17/2023</small></p>
                            <h5 class="card-title">Reminder: Advising and Registration Periods for Summer and Fall 2023
                            </h5>
                            <p class="card-text">This is to inform you that the online course registration for the
                                Summer
                                and Fall 2023 semesters will take place according to the following schedule:</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardFirst">
                        <img class="card-img-top" src="images/earthquake.png" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/15/2023</small></p>
                            <h5 class="card-title">Understanding Earthquakes and their Impacts Seminar</h5>
                            <p class="card-text">On the behalf, ASCE_RHU student chapter invites you to attend a Seminar
                                entitled “Understanding Earthquakes and their Impacts” held by the Dr. Mehedeen Machaka
                            </p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardFirst">
                        <img class="card-img-top" src="images/ramadan.jpg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/13/2023</small></p>
                            <h5 class="card-title">Join us for "Ramadan Gathers Us" and Support Small Businesses</h5>
                            <p class="card-text">As part of our mission to support and give back to the community, we
                                are
                                excited to announce our upcoming event, "Ramadan Unites Us!</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardSecond homepageHidden">
                        <img class="card-img-top" src="images/connectWorld.jpg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/11/2023</small></p>
                            <h5 class="card-title">Invitation to Attend Connecting the World with Intelligence
                            </h5>
                            <p class="card-text">The RHU-IEEE Student Branch would like to invite you to an upcoming
                                workshop on enterprise security challenges that will be presented by Alumnus Ahmad
                                Ramadan
                            </p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardSecond homepageHidden">
                        <img class="card-img-top" src="images/economy.jpg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/9/2023</small></p>
                            <h5 class="card-title">Is our Economy Heading towards The Great Fallout?</h5>
                            <p class="card-text">"The Future of The Lebanese Lira and The Fate Of The Deposits"
                                Lebanon is undergoing one of the biggest crises it has faced since the end of the civil
                                war
                            </p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardSecond homepageHidden">
                        <img class="card-img-top" src="images/bakesale.png" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/7/2023</small></p>
                            <h5 class="card-title">Students Hosting A Bake Sale in the Green Field</h5>
                            <p class="card-text">On behalf of ASCE_RHU student Chapter invite you to be part of the bake
                                sale held on Thursday 16th March near the cafeteria from 11:00 am to 12:00 pm</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardThird homepageHidden">
                        <img class="card-img-top" src="images/future.jpeg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/5/2023</small></p>
                            <h5 class="card-title">Competition: What Will Our Future Look Like?</h5>
                            <p class="card-text">The RHU Communication and Alumni Relations Office, Coop, and Career
                                Services will help answer this question during the Careers of the Future seminar.</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardThird homepageHidden">
                        <img class="card-img-top" src="images/shortstory.jpg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/3/2023</small></p>
                            <h5 class="card-title">Short story contest: The Lebanon of our dreams</h5>
                            <p class="card-text">Inspired by a common purpose of the organizers to make the young
                                generation
                                dream and believe in a brighter future, he competition gives gives opportunities</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>
                    <div class="card cardThird homepageHidden">
                        <img class="card-img-top" src="images/python.jpeg" alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text homepageDate"><small class="text-muted">3/1/2023</small></p>
                            <h5 class="card-title">Workshop: Python Programming - from Beginner to Master </h5>
                            <p class="card-text">This two-session series will take you from beginner to master, covering
                                the
                                basics of Python programming in the first session and advanced techniques in the second
                                session.</p>
                            <a href="#" class="homepageReadMore">Read More...</a>
                        </div>
                    </div>

                </div>
                <div id="homepageNewsButtons">
                    <button id="homepagebtnOne" class="homepageActivated">1</button>
                    <button id="homepagebtnTwo">2</button>
                    <button id="homepagebtnThree">3</button>
                    
                </div>

JS Code:

let btnOne = $("#homepagebtnOne");
    let btnTwo = $("#homepagebtnTwo");
    let btnThree = $("#homepagebtnThree");

    btnOne.click(function () {
      $(".cardFirst").each(function (i) {
        $(this).removeClass("homepageHidden");
        $(this).addClass("animatedCardEnterFromRight");
      });

      $(".cardSecond").each(function (i) {
        $(this).addClass("homepageHidden");
      });

      $(".cardThird").each(function (i) {
        $(this).addClass("homepageHidden");
      });

      btnOne.addClass("homepageActivated");
      btnTwo.removeClass("homepageActivated");
      btnThree.removeClass("homepageActivated");
    });


    btnTwo.click(function () {

      $(".cardSecond").each(function (i) {
        $(this).removeClass("homepageHidden");
        if (btnOne.hasClass("homepageActivated")) {
          $(this).removeClass("animatedCardEnterFromLeft");
          $(this).removeClass("animatedCardEnterFromRight");
          $(this).addClass("animatedCardEnterFromLeft");
        }
        else if (btnThree.hasClass("homepageActivated")) {
          $(this).removeClass("animatedCardEnterFromRight");
          $(this).removeClass("animatedCardEnterFromLeft");
          $(this).addClass("animatedCardEnterFromRight");
        }
      });

      $(".cardFirst").each(function (i) {
        $(this).addClass("homepageHidden");
      });

      $(".cardThird").each(function i() {
        $(this).addClass("homepageHidden");
      });

      btnOne.removeClass("homepageActivated");
      btnTwo.addClass("homepageActivated");
      btnThree.removeClass("homepageActivated");
    });

    btnThree.click(function () {
      $(".cardSecond").each(function (i) {
        $(this).addClass("homepageHidden");
      });

      $(".cardFirst").each(function (i) {
        $(this).addClass("homepageHidden");
      });

      $(".cardThird").each(function i() {
        $(this).removeClass("homepageHidden");
        $(this).addClass("animatedCardEnterFromLeft");
      });

      btnOne.removeClass("homepageActivated");
      btnTwo.removeClass("homepageActivated");
      btnThree.addClass("homepageActivated");
    });

Picture of the elements from the console
PIC

2

Answers


  1. The code seems to work perfectly.

    <STYLE>
    .card{
      padding: 10px;
      width: 100px;
      margin: 0 auto;
      text-align: center;
    }
    .animatedCardEnterFromLeft {
      animation: EnterFromLeft 0.75s ease-in-out;
      background: #f00;
    }
    
    @keyframes EnterFromLeft {
      from {
        opacity: 0;
        transform: translateX(-300px);
      }
      to {
        opacity: 1;
        transform: translateX(0px);
      }
    }
    
    .animatedCardEnterFromRight{
      animation: EnterFromRight 1s ease-in-out;
      background: #0ff;
    }
    
    @keyframes EnterFromRight {
      from {
        opacity: 0;
        transform: translateX(300px);
      }
      to {
        opacity: 1;
        transform: translateX(0px);
      }
    }
    </STYLE>
    </head>
    <body>
    test 1
    <div class="card animatedCardEnterFromLeft">Hello World</div>
    <div class="card animatedCardEnterFromRight">Bye bye</div>
    <br/>test 2
    <div class="card animatedCardEnterFromLeft" style='animation-duration: 5s;'>Hello World</div>
    <div class="card animatedCardEnterFromRight" style='animation-duration: 2.s; '>Bye bye</div>
    <br/>test 3
    <div class="card animatedCardEnterFromLeft" style='animation-duration: 5s;'>Hello World</div>
    <div class="card animatedCardEnterFromRight" style='animation-duration: 5s;'>Bye bye</div>
    Login or Signup to reply.
  2. as by the name suggest one making animate from left to right and the other one is right to left.
    and it works perfectly fine. it just seems there are problem in your jquery in adding and removing the class

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search