Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this:

<h2>I'm <span style = "font-size: 20px; color: red">available</span> for work</h2></span>

I also tried creating a class in my CSS file to achieve the desired effect:

.my-class {
    font-size: 20px;
    color: red;
}

Unfortunately, neither of these methods seemed to produce any results. How can I modify the size and color of a single word using CSS?

/* Global Variables */

 :root {
  --main-bg-color: #DDD0C8;
  --secondary-bg-color: #323232;
}

* {
  box-sizing: border-box;
  line-height: 1.5em;
  padding: 0;
  margin: 0;
}

html {
  font-size: var(--main-font-size);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: beige;
}


/*---CONTACT SECTION---*/

.contact-container {
  background-color: darkgray;
  padding-top: 10px;
  text-align: center;
}

.contact-text h2 {
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-text p {
  font-weight: 700;
  text-align: center;
  font-size: var(--main-font-size);
  font-family: 'Poppins', sans-serif;
}

.shine_animation {
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 5s linear infinite;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  position: relative;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
    background-color: var(--main-bg-color);
  }
}
<!DOCTYPE html>
<html lang="en">

<!-- Head -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">
</head>

<body>

  <!-- Contact Section -->
  <div class="contact-container">
    <div class="contact-text" , id="contact">
      <h2>I'm <span style = "font-size: 20px; color: red">available</span> for work</h2>
      </span>
      <span><p>Get in touch with me today.</p></span>
    </div>
  </div>

</body>

</html>

htmlcss

Answer №1

You've made it! Just remember to apply the .shine_animation class to your span. Once you do that, everything should be set.

I must mention, if these are the colors being used, they might not be very user-friendly, but you can always improve on that aspect.

If you want the text to appear larger, just include the font-size property in the .shine_animation class. Also, make sure to remove the existing style tag from the span element.

In response to the comments, I have modified the first example as requested. Initially, the animation runs on the h2 element and then a separate animation affects the word "available". To achieve the second animation, ensure that the animation-delay matches the duration of the first animation. Furthermore, in the initial animation, set the text fill color to transparent (this property cannot be animated). The reason for not seeing the change before was due to all h2 elements having transparent text for the animation effect. Once again, please consider improving the accessibility of these color choices.

/* Custom Variables */
 :root {
  --main-bg-color: #DDD0C8;
  --secondary-bg-color: #323232;
}

* {
  box-sizing: border-box;
  line-height: 1.5em;
  padding: 0;
  margin: 0;
}

html {
  font-size: --main-font-size;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: beige;
}


/*---CONTACT SECTION---*/

.contact-container {
  background-color: darkgray;
  padding-top: 10px;
  text-align: center;
}

.contact-text h2 {
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-text p {
  font-weight: 700;
  text-align: center;
  font-size: var(--main-font-size);
  font-family: 'Poppins', sans-serif;
}

.shine_animation {
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 5s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  position: relative;
  font-size: 40px;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
    background-color: var(--main-bg-color);
  }
}

.grow {
  animation: grow 2s forwards 5s;
}

@keyframes grow {
  0% {
    font-size: 20px;
    -webkit-text-fill-color: initial;
    color: black;
  }
  100% {
    font-size: 40px;
    -webkit-text-fill-color: initial;
    color: red;
  }
}
<!DOCTYPE html>
<html lang="en">

<!-- Head -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">
</head>

<body>

  <!-- Contact Section -->
  <div class="contact-container">
    <div class="contact-text" id="contact">
      <h2 class="shine_animation">I'm <span class="grow">available</span> for work</h2>
      </span>
      <span><p>Get in touch with me today.</p></span>
    </div>
  </div>

</body>

</html>

Answer №2

h1 {
  animation-name: example-animate;
  animation-duration: 4s;
}
@keyframes example-animate {
  from {
    color: red;
    font-size:16px;
  }
  to {
    color: yellow;
    font-size:50px;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Animating Text Demo</title>
</head>
<body>
  <h1>Changing Font Color and Size Animatedly.</h1>
</body>
</html>

Answer №3

To adjust the font color and size of a specific term using CSS animations:

I have implemented the -webkit-text-fill-color property within the .font-color-size class, which directly specifies the text fill color as red. Consequently, the word "available" will now display in red with a font size of 20px.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">

  <style>
    /* Universal Styles */
    :root {
        --main-bg-color: #DDD0C8;
        --secondary-bg-color: #323232;    
    }

    * {
        box-sizing: border-box;
        line-height: 1.5em;
        padding: 0;
        margin: 0;
    }</answer3>
<exanswer3><div class="answer" i="76832829" l="4.0" c="1691109726" m="1691123752" v="-1" a="TXVoYW1tYWQgSWRyZWVz" ai="8013797">
<p>To modify the font style and size of a single word through CSS animation:</p>
<p>I have added the <code>-webkit-text-fill-color property to the .font-color-size class, which explicitly defines the text fill color as red. This modification will alter the font size and color of the word "available" to 20px and red, respectively.


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="animate.css">

  <style>
    /* Global Variables */
    :root {
        --main-bg-color: #DDD0C8;
        --secondary-bg-color: #323232;    
    }

    * {
        box-sizing: border-box;
        line-height: 1.5em;
        padding: 0;
        margin: 0;
    }

    html {
      font-size: --main-font-size;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background-color: beige;
    }

    /*---CONTACT SECTION---*/
    .contact-container {
      background-color: darkgray;
      padding-top: 10px;
      text-align: center;
    }

    .contact-text h2 {
      font-weight: 700;
      text-align: center;
      font-size: 20px;
      font-family: 'Poppins', sans-serif;   
    }

    .contact-text p {
      font-weight: 700;
      text-align: center;
      font-size: var(--main-font-size);
      font-family: 'Poppins', sans-serif; 
    }

    .shine_animation {
      background: linear-gradient(90deg, #000, #fff, #000);
      letter-spacing: 5px;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-repeat: no-repeat;
      background-size: 80%;
      animation: shine 5s linear infinite; 
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      position: relative;
    }

    @keyframes shine {
      0% {
        background-position-x: -500%;
      }
      100% {
        background-position-x: 500%;
        background-color: var(--main-bg-color);
      }
    }

    /* Custom class to change font size and color */
    .font-color-size {
      font-size: 20px;
      color: red;
      -webkit-text-fill-color: red; /* Set the text fill color explicitly */
    }
  </style>
</head>

<body>
  <!-- Contact Section -->
  <div class="contact-container">
    <div class="contact-text" id="contact">
      <h2>I'm <span class="shine_animation">available</span> for work</h2>
      <span><p>Get in touch with me today.</p></span>  
    </div> 
  </div>
</body>

</html>

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

Customized icons for Contact Form 7 on your Wordpress website

Currently, I am in the process of customizing a contact form by incorporating placeholder icons and text using the 'Contact Form 7' plugin within Wordpress. This particular contact form is situated on a website that I am constructing with the &ap ...

htmlcsswordpresswordpress-themingcontact-form-7

Creating a table from a PHP associative array

I've been attempting to organize an associative array in ascending order and then display it in an HTML table, but I've hit a roadblock with an error. I tried searching for solutions here on SO and followed the advice provided in some threads: P ...

phphtmlarrays

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

htmltypescriptdom

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Automatically updating markers on Google Maps v3

I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...

jqueryhtmlajax

Struggle between Angular and fundamental CSS principles

Upon following the steps below, I aim to achieve my desired grids: How to set auto-margin boxes in flexible-width design using CSS? The solution provided is effective when implemented outside of Angular. However, when inserted inside an Angular component ...

cssangulartypescript

Tips on changing the background image when hovering over a list item and a link with CSS

I have been attempting to adjust an image that is nested within a link which is nested inside a list. My initial idea was to use the image as a background picture. The issue arises when I try to position the background picture correctly with respect to th ...

htmlcss

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

htmlcssthymeleafbootstrap-5

After each animation in the sequence is completed, CSS3 looping occurs

I have currently set up a sequence of 5 frames, where each frame consists of 3 animations that gradually fade into the next frame over time. My challenge is figuring out how to loop the animation after completing the last sequence (in this case, #frame2). ...

javascriptcsscss-transitionscss-animations

Tips for showcasing information on an HTML website

I am currently facing an issue with displaying addresses retrieved from a database in my project. The problem lies in the formatting of the address when it is displayed on the page. Currently, the address is being displayed as follows: Address: 1 Kings S ...

htmlcsstwitter-bootstrap

a basic three-tier flexible design with alignment to the lower right side

I am looking to create a dynamic header that adjusts based on the height of the svg logo and available width for the navigation: layout1: https://i.sstatic.net/Oa8gB.png If there is not enough space for all navigation buttons (a) to fit in one row next t ...

csshtmllayoutsvgflexbox

Determine if an HTML element contains a specific class using JavaScript

Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...

javascripthtmlclasscss

How can I address the problem of adjusting the title to match the size of the image in question?

I need help creating a design where an image and h2 title appear on top of the image... Below is a reference screenshot: I am looking to achieve something similar. CSS: h2 { position: relative; letter-spacing: 1px; display: inline-block; positi ...

jqueryhtmlcss

Is it possible for Javascript to manipulate the DOM of an Ajax text/html response?

My goal is to implement Ajax to retrieve an HTML page and extract a specific div by its ID, then insert that div into the current page. This involves loading a second page via Ajax, extracting the specified div from the response, and placing it within th ...

javascripthtmlajaxdom

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

javascriptjqueryhtmlcssangularjs

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

Adding columns dynamically to a table using ASP.NET Core 6

I am currently working on a project for my university, and I need to design a dynamic table with columns that can be added as needed. Each row should have a maximum of 4 columns before moving on to the next row and continuing the process until completion. ...

c#htmlasp.net-coreasp.net-core-mvc

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

javascripthtmlcss

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

javascriptjqueryhtmlforms