Create dynamic animations on HTML text using CSS

Looking to add some flair to your website with a text animation? How about making the text automatically glide from one side to the other like a ticker display? Any suggestions for simple CSS code to achieve this would be greatly appreciated!

Thanks in advance for any help!

I attempted using the marquee tag, but experienced significant lag.

htmlcss

Answer №1

Here is the code for a CSS animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>css animation</title>
</head>
<body>
    <h2 class="anim">Hello world!</h2>
</body>
</html>

This CSS will create an animated effect on an element with the class "anim":

.anim {
    animation: move 2s infinite;
    position: absolute;
    right: 0px;
}

.anim {
    animation: move 5s infinite;
    position: absolute;
  opacity: 1;
}

@keyframes move {
    0%   {left:100%;}
    50%  {left: 0px;}
    100% { opacity:0;}
}

You can view this code in action on Codepen: https://codepen.io/djalms/pen/GRGmYoZ

Answer №2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link
      rel="apple-touch-icon"
      type="image/png"
      href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"
    />
    <meta name="apple-mobile-web-app-title" content="CodePen" />

    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"
    />

    <link
      rel="mask-icon"
      type="image/x-icon"
      href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
      color="#111"
    />

    <title>CodePen - Wave Text</title>
    <link
      href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
    />

    <style>
      .container {
        max-width: 960px;
      }

      body {
        background-color: #fafafa;
      }

      .widthset {
        width: 16.5%;
      }

      .heading-style {
        font-family: "Righteous", cursive;
        font-size: 205px;
        font-weight: bolder;
        -webkit-text-stroke: 2px rgba(6, 188, 209, 0.2);
        background: #ffffff;
        mix-blend-mode: screen;
        padding-top: 190px;
      }

      @media (min-width: 1200px) .container,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl {
        max-width: 1140px;
      }

      @media (min-width: 992px) .container,
        .container-lg,
        .container-md,
        .container-sm {
        max-width: 960px;
      }

      @media (min-width: 768px) .container, .container-md, .container-sm {
        max-width: 720px;
      }

      @media (min-width: 576px) .container, .container-sm {
        max-width: 540px;
      }

      @media (min-width: 1200px) .container {
        max-width: 1140px;
      }

      @media (min-width: 992px) .container {
        max-width: 960px;
      }

      @media (min-width: 768px) .container {
        max-width: 720px;
      }

      @media (min-width: 576px) .container {
        max-width: 540px;
      }

      .shadow {
        box-shadow: 0px 18px 39.1px 6.9px rgba(224, 241, 255, 0.34) !important;
      }

      .card {
        border: 0;
      }

      .mt-15 {
        margin-top: 15%;
      }

      .progress-wrapper {
        height: 240px;
        overflow: hidden;
      }

      .wave {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .card-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-height: 1px;
        padding: 1.25rem;
      }

      .card-title {
        margin-bottom: 0.75rem;
      }

      .list-unstyled {
        padding-left: 0;
        list-style: none;
      }

      .card {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
        margin-bottom: 20px;
      }

      .wave::before,
      .wave::after {
        content: "";
        position: absolute;
        width: 470px;
        height: 390px;
        bottom: 0;
        left: 55%;
        background-color: rgba(255, 255, 255, 0.18);
        border-radius: 70%;
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0);
        -webkit-animation: rotate 6s linear infinite;
        animation: rotate 6s linear infinite;
        z-index: 10;
      }

      .wave::after {
        border-radius: 30%;
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0);
        -webkit-animation: rotate 10s linear -5s infinite;
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
      }

      @keyframes rotate {
        50% {
          transform: translateX(-50%) rotate(180deg);
        }

        100% {
          transform: translateX(-50%) rotate(360deg);
        }
      }

      @media only screen and (max-width: 768px) {
        .heading-style {
          font-family: "Righteous", cursive;
          font-size: 156px;
        }

        .progress-wrapper {
          height: 209px;
        }
      }

      @media only screen and (max-width: 425px) {
        .heading-style {
          font-family: "Righteous", cursive;
          font-size: 65px;
        }

        .progress-wrapper {
          height: 148px;
        }

        .wave::before,
        .wave::after {
          width: 490px;
          height: 331px;
        }
      }
    </style>

    <script>
      window.console = window.console || function (t) {};
    </script>

    <script>
      if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
      }
    </script>
  </head>

  <body translate="no">
    <a href="https://www.youtube.com/watch?v=szLmLFsisbY" target="_blank">
      <section class="section">
        <div class="container">
          <div class="row mt-15">
            <div class="text-center widthset">
              <div
                class="position-relative rounded-top progress-wrapper"
                style="
                  background-image: linear-gradient(
                    to bottom,
                    #f8e739,
                    #f1d42d,
                    #eac222,
                    #e1b019,
                    #d89e10
                  );
                "
              >
                <div class="wave" style="bottom: 80%">
                  <h1 class="heading-style">H</h1>
                </div>
              </div>
            </div>

            <div class="text-center widthset">
              <div
                class="position-relative rounded-top progress-wrapper"
                style="
                  background-image: linear-gradient(
                    to bottom,
                    #d89e10,
                    #e28f00,
                    #ec7f00,
                    #f66b00,
                    #ff5200
                  );
                "
              >
                <div class="wave" style="bottom: 80%">
                  <h1 class="heading-style">E</h1>
                </div>
              </div>
            </div>

            <div class="text-center widthset">
              <div
                class="position-relative rounded-top progress-wrapper"
                style="
                  background-image: linear-gradient(
                    to bottom,
                    #e2130b,
                    #e1110c,
                    #e00f0d,
                    #df0c0d,
                    #de090e
                  );
                "
              >
                <div class="wave" style="bottom: 80%">
                  <h1 class="heading-style">L</h1>
                </div>
              </div>
            </div>

            <div class="text-center widthset">
              <div
                class="position-relative rounded-top progress-wrapper"
                style="
                  background-image: linear-gradient(
                    to bottom,
                    #ce0061,
                    #d50079,
                    #d60094,
                    #d000b3,
                    #c115d4
                  );
                "
              >
                <div class="wave" style="bottom: 80%">
                  <h1 class="heading-style">L</h1>
                </div>
              </div>
            </div>

            <div class="text-center widthset">
              <div
                class="position-relative rounded-top progress-wrapper"
                style="
                  background-image: linear-gradient(
                    to bottom,
                    #6a0ddc,
                    #5f0ddd,
                    #530edd,
                    #450fde,
                    #3210de
                  );
                "
              >
                <div class="wave" style="bottom: 80%">
                  <h1 class="heading-style">O</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </a>
  </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

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below: <img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`> Note: 1) The ht ...

javascripthtmlvue.jsvuejs2web-frontend

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

javascriptjqueryhtmlcss

Looking for PHP function recommendations!

I need some help with creating a function in my PHP page. I want to create a function that can transfer a value from Field A to Field B. Here is my current code: <table class="table table-hover table-bordered"> <thead> <tr> <th ...

phphtml

Place the span element above the div container

I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before? Is there a way to display the numbe ...

htmlcss

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

javascripthtmlcssfirefoxgreasemonkey

What is the process for creating a progress bar in PixiJS?

Can someone guide me on creating a progress bar similar to the one in PixiJS? Screenshot ...

javascripthtmlcanvas

Styling div elements to match the dimensions of table rows in CSS

When it comes to CSS, I wouldn't call myself an expert; My question is: is there a way for a div tag to inherit dimensions from specific table rows based on their class or id? For instance: Imagine we have a table with multiple rows, but we don&apos ...

javascriptjqueryhtmlcsshtml-table

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

htmlangularjsangularjs-interpolate

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

javascriptjquerycssangularjskendo-ui

Can PhoneGap be used to create HTML5 applications from scratch?

Despite diligently searching through the PhoneGap website and their support group, I am still coming up empty-handed in my quest for an answer: My current project involves creating an application that functions as a pure HTML5 application, capable of runn ...

androidiphoneipadhtmlcordova

Creating tooltips using React and Tailwind CSS

I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied. JSX Component: const HeaderIcon = ({ icon, redirect = window.location.pat ...

cssreactjstailwind-css

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using React components with Material UI to create styled div boxes

As I work on creating a mock website with React and Material UI, I have utilized the RaisedButtonExampleSimple component for buttons from Material UI within a div named App-Intro. Strangely, the text in the Div "Customer-Choice" is displaying above the but ...

htmlcssreactjsmaterial-ui

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

jqueryhtmlcss

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

jqueryhtmljquery-uiace-editor

Make sure the top edge of your Bootstrap 4 dropdown menu is perfectly aligned with the bottom edge of your

Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...

htmlcsstwitter-bootstrap

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

How to position two divs in a row using Bootstrap

Looking at the output below: https://i.stack.imgur.com/pQM8F.png The blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly. Here's th ...

htmlcsstwitter-bootstrap-3