Exploring CSS animations by utilizing the transform and color properties

I am currently working on a project that involves animating text (specifically "happy birthday to you") and a heart. The idea is for the heart to drop and hit each word one by one, turning them yellow upon impact. Once the last word is hit, the text should fade away momentarily before reappearing in its original color. I have managed to implement the animation using the transform property, but I am encountering issues with the colors. Any suggestions for fixing this would be greatly appreciated.

.main .text{
    font-size: 50px;
    font-family: cursive;
    color: white;
    animation: opacity-control 3.5s infinite;
    
}
.main .text span{
    display: inline-block;
    animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;

    
}
.main .text span:nth-child(1){
    animation-delay: 0.25s;
}
.main .text span:nth-child(2){
    animation-delay: 0.5s;
}
    
.main .text span:nth-child(3){
    animation-delay: 0.75s;

}
.main .text span:nth-child(4){
    animation-delay: 1s;

}
.main .text span:nth-child(5){
    animation-delay: 1.25s;
}

@keyframes text-jump{
    0%{
        transform: translateY(0);
        color: yellow;
        
    }
    10%{
        transform: translateY(20px);
        color: yellow;
        
    }
    15%{
        transform: translateY(0);
        color: yellow;
    }
    100%{
        color: yellow;
    }
}

@keyframes opacity-control{
    0%{
        opacity: 1;
        
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes color-change{
    0%{
      
    }
    40%{
        color: yellow;
    }
    95%{
        color: yellow;
    }
    100%{
        color: white;
    }
}

Answer №1

Why use two separate animations when you can achieve the desired effect with just one?

Combine the color change and 'jump' animation into a single keyframe, eliminating the unnecessary 100% step and adjusting the 15% step to revert the text color back to white.

@keyframes new-color-jump {
  0% {
    transform: translateY(0);
    color: yellow;
  }
  10% {
    transform: translateY(20px);
    color: yellow;
  }
  15% {
    transform: translateY(0);
    color: white;
  }
}

Modify your code to utilize this updated animation only:

.main .text span {
  display: inline-block;
  animation: new-color-jump 3.5s ease-in-out infinite;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue along with bootstrap-vue: Ensuring only one list element is expanded in a list (v-for) at any given time

In my Vue project with bootstrap-vue, I am utilizing the b-collapse feature within a v-for loop for lists. While it is functioning correctly, I am struggling to automatically close expanded list elements when a new one is clicked. Here is my question: Ho ...

Personalized jQuery mask customization

After experimenting with a masking function that conceals numbers based on a specific pattern, I am now looking to make it more flexible for users. For instance, if a user types 123456789, the field will display as XXX-XX-6789. Currently, the pattern is ...

experiencing a problem with the older version 1.5 of the swfobject.js software

Hello there! I am encountering an issue with swfobject.js version 1.5 specifically in IE7 and IE8. My chart is not displaying in these web browsers, but it works perfectly fine on Chrome, Firefox, and even IE 6. Do you have any suggestions on how to resolv ...

Preventing Multiple Form Submissions in JavaScript

I'm having an issue with my form submission to Parse where, after adding client-side validation, the data is being double submitted to the database. Despite adjusting my code based on other Stack posts and being new to JavaScript, I'm still expe ...

Unable to retrieve req.body data, despite having body-parser enabled

I've been working on setting up my login functionality, but I'm running into an issue with accessing the req.body object. Initially, the post route wasn't triggering at all (no console.log output in terminal) and the request would eventuall ...

Creating movement effects for a line on an HTML5 canvas following a previous animation

I am facing an issue where my straight line starts animating towards the circle right at the beginning of page load. I am struggling with finding the logic to make the line animate in the opposite direction after the first animation is completed (which is ...

Align Text Center inside a Magical H1 Heading Tag

I'm having a bit of trouble with something that should be simple. I want to center the text inside my h1 tag on a wizard, and I've added this CSS to my stylesheet.css: .h1textalign { text-align:center; } Here's how I'm trying to apply ...

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

Is there a way to enhance the Download File dialog with an additional option?

I want to develop an extension for a specific file type, and I'm interested in including a "Send to MyAddonName" feature in the download file dialog, alongside the "Open with" and "Save file" options. Just to clarify, I don't mean the Download Ma ...

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

Tips for handling ng-if during element presence checks

There's a hidden div on my web page that is controlled by an ng-if directive. I'm looking to create a test that confirms the presence of the element only when it should be visible. If the condition set by ng-if is not met, the element is complete ...

When attempting to modify the state in a parent component from a child using the composition API in Vue 3, the error "this.$emit() is not a

//Main component <template> <childComponent @onChangeData='updateData' /> </template> <script> setup() { const state = reactive({ data: 'example' }); function updateData(newValue){ s ...

The margin on the right side is not functioning as expected and exceeds the boundary, even though the container is using the flex display property

I'm struggling to position the rating stars on the right side without them going outside of the block. I attempted using 'display: flex' on the parent element, but it didn't solve the issue(( Currently trying to adjust the layout of t ...

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

What is the reason that the css backdrop-filter: blur() is functioning properly everywhere except on the active bootstrap-4 list-group-item?

I have a gallery with an album-card component inside, and within that is a carousel. I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why? Here is the HTML for the gallery com ...

Encountering a compile error with a Next.js React project that cannot be resolved

Encountered an issue while refreshing my project with the command "npm run dev" and reloading the site locally. The console displays "Compiled /not-found" and the site fails to load completely. In addition, none of the elements animated via framer motion ...

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

At the moment, I am using the Month selector and Year selector for Date of Birth in the react-datepicker component within a guest details form. The current functionality is such that the selected date is highlighted on the calendar, which works fine. How ...

JavaScript reference problem when copying

Initially, I create a raw array by using the following initialization: $scope.rawUsers = angular.copy($scope.users); Subsequently, I make modifications to the data like so: function filterUsers(searchString, onlyMine) { $scope.users = []; _.find($scop ...

Quickly switch between pages as they load

In Chrome, I'm experiencing a white flash between page loads that is causing transitions to appear choppy. I've taken various steps to optimize the site, such as using image sprites, reducing image sizes, minifying CSS, ensuring correct CSS loadi ...

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...