Having trouble getting the CSS animation to work properly with the text

Update: The direct link is working fine, unlike the rocketscript version.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        I have been attempting to animate word rotation with CSS animation, but despite trying everything, it's not functioning as expected.

I aim to rotate each name one by one. Here is my JSFiddle: https://jsfiddle.net/knfwom9n/

The word "New Year" ought to transition to new words like Diwali and Women's Day, yet the animation aspect isn't working properly.

Below is the complete code snippet:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
    <style type="text/css">
        .cf-hidden {
            display: none;
        }

        .cf-invisible {
            visibility: hidden;
        }
    </style>
    <link rel="stylesheet" href="http://something.com/js/css/stylewish.css">
    <link href="http://something.com/img/icon.png" rel="icon" type="image/x-icon">
    <style type="text/css"></style>
</head>

<body>
    <main>
        <div class="row container">
            <div class="col s12">
                <div class="valign-wrapper">
                    <div class="col l3 hide-on-small-only">
                    </div>
                    <div class="col s12 l6 offset-l3">
                        <div class="valign card-panel  z-depth-2">
                            <div class="card-content">
                                <div class="row">
                                    <div class="create-idea">
                                        <img class="center" src="http://something.com/js/css/wishes-sharing-2.svg" height="100px" width="100px" alt="Wishes">
                                        <img class="center" src="http://something.com/js/css/wishes-sharing.svg" height="100px" width="100px" alt="Wishes">
                                        <br>
                                        <section class="cd-intro">
                                            <h5 class="cd-headline letters type">
                                              <span>Create Your Wishes For </span>
                                              <span class="cd-words-wrapper">
                                                <b class="is-hidden" style="opacity: 1;"><i class="out">D</i><i class="out">i</i><i class="out">w</i><i class="out">a</i><i class="out">l</i><i class="out">i</i></b>
                                                <b class="is-hidden" style="opacity: 1;"><i class="out">F</i><i class="out">r</i><i class="out">i</i><i class="out">e</i><i class="out">n</i><i class="out">d</i><i class="out">s</i><i class="out">h</i><i class="out">i</i><i class="out">p</i></b>
                                                <b class="is-hidden" style="opacity: 1;"><i class="out">B</i><i class="out">i</i><i class="out">r</i><i class="out">t</i><i class="out">h</i><i class="out">d</i><i class="out">a</i><i class="out">y</i></b>
                                                <b class="is-hidden" style="opacity: 1;"><i class="out">C</i><i class="out">h</i><i class="out">r</i><i class="out">i</i><i class="out">s</i><i class="out">t</i><i class="out">m</i><i class="out">a</i><i class="out">s</i></b>
                                                <b class="is-visible" style="opacity: 1;"><i class="in">N</i><i class="in">e</i><i class="in">w</i><i class="in"> </i><i class="in">Y</i><i class="in">e</i><i class="in">a</i><i class="out">r</i></b>
                                              </span>
                                            </h5>
                                        </section>
                                    </div>
                                    <div class="input-field col s12 ">
                                        <input id="username" onKeyDown="validateAlpha();" type="text" class="validate" required="" maxlength="15">
                                        <label for="username">Enter Your Name</label>
                                    </div>
                                    <select id="wishes-select" onChange="selected();" name="wishes-select" style="margin-bottom: 15px;">
                                        <option value="0" hidden="" disabled="" selected="">Choose your Wishes</option>
                                        <option value="friendship">Friendship Day</option>
                                        <option value="birthday">Birth Day</option>
                                        <option value="magic">Women's Day</option>
                                        <option value="diwali">Diwali (India)</option>
                                        <option value="xmas">Christmas</option>
                                        <option value="new">New Year</option>
                                    </select>
                                    <div class="input-field col s12" id="bnames" style="display:none;">
                                        <input id="bname" type="text" onKeyDown="validateAlpha();" class="validate" required="" maxlength="15">
                                        <label for="bname">Birthday Boy/Girl Name</label>
                                    </div>
                                    <div class="input-field col s12" id="bnamess" style="display:none;">
                                        <input id="bwords" type="text" onKeyDown="validateAlpha();" class="validate" required="" maxlength="50">
                                        <label for="bwords">Birthday Quotes</label>
                                    </div>
                                    <p id="error-display" style="display:none;"></p>
                                    <button class="btn waves-effect waves-light" onClick="create();" type="submit" style="width:100%" name="action">Create</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="page-footer blue-grey darken-1">
        <div class="footer-copyright">
            <div class="container">
                <a class="grey-text text-lighten-4" href="http://something.com/" target="_blank">Create Wishes</a>
                <a class="grey-text text-lighten-4 right" href="http://something.com" target="_blank">Something</a>
            </div>
        </div>
    </footer>

    <script data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>
    <script data-rocketsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>
    <script data-rocketsrc="http://something.com/js/wish.js" type="text/rocketscript" data-rocketoptimized="true"></script>
    <script data-rocketsrc="http://something.com/js/hoped.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>

    <div class="hiddendiv common"></div>
</body>

Your assistance in resolving this issue will be greatly appreciated.

Link to JS Fiddle: https://jsfiddle.net/knfwom9n/

javascriptjqueryhtmlcss

Answer №1

By simply updating the URLs of the JS files to the standard format instead of using rocketscript, I was able to resolve the issue. Here is an example:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

The problem was being caused by rocketscript.

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

How can I generate a fresh window/frame within my Javascript canvas?

Is there a way to open a new frame or window within the canvas using JavaScript? I am working on a game project where I want to implement a feature that displays additional information on a menu screen when a button is pressed. Currently, I have managed to ...

javascriptcanvas

Table in a formatted JSON encode

Using jquery to retrieve data from a PHP file, I successfully get the data but it seems to only output the first row of the fetched table. Here is my PHP code: $data = array(); while ($rowtwo = $queryresult->fetch_assoc()){ $data['id'] = j ...

phpjqueryjson

Steps to update the package version in package.json file

If I remove a package from my project using the following command: npm uninstall react The entry for this package in the package.json file does not disappear. Then, when I install a different version of this package like so: npm install <a href="/cdn ...

javascriptnpmterminal

Tips for creating a helper function that returns a promise for a React hook function

So, I have this React functional component that makes use of both the useState and useEffect hooks: import React, { useState, useEffect } from 'react'; import { requestInfo } from './helpers/helpers'; const App = () => { const [pe ...

javascriptreactjsajax

What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

On my HTML page, I have 2 lists that I want to modify so that when an option is clicked, it adds a class altering the background-color of the li element to red. If the same option is clicked again, it removes the class and reverts back to white: This is t ...

javascriptangularjs

What is the best way to align my content alongside my sidebar?

I am facing some challenges with my website layout because I used Bootstrap to integrate a sidebar. The sidebar has caused issues with the positioning of my content, and I'm struggling to align it properly next to the sidebar on the left side. Please ...

javascripthtmljquerycssbootstrap-5

Encountering an issue with jQuery ajax when attempting to make a post

I am having trouble making a rest service call from JQuery ajax using the POST method. Below is my code: <!DOCTYPE html> <html> <head> <script src="lib/js/jquery/jquery-1.7.2.min.js"></script> </head> <body> & ...

jqueryajax

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

Encountering a 404 error when trying to click on 'allow' after using Firebase Cloud Messaging, and attempting to add a service worker manually proves unsuccessful in resolving the issue

Currently, I am working on integrating FCM (Firebase Cloud Messaging) into a React app. Initially, I tested it on a simple project without React and everything worked smoothly. However, implementing it in the React app has presented some challenges for me. ...

javascriptreactjsfirebasefirebase-cloud-messaging

What is the maximum storage capacity for variables on a NodeJS/ExpressJS server when handling multiple users?

As I delve into the node server code, I find myself pondering on the idea of storing temporary data - objects and arrays - within variables. These variables are housed in the client variable of a socket and are purged when connection with the client is l ...

javascriptnode.jsexpressmemory-managementperformance-testing

Unable to ajax post on IE10

My struggles with getting ajax to function in IE10 continue. Despite various attempts and approaches, the result is always the same - an empty string. <html> <head> <script type="text/javascript" src="jquery-1-9-1.js"></script&g ...

jqueryajaxinternet-explorerinternet-explorer-10

Transforming the hide/show functionality from JQuery to Vue

I created some hide/show panels using jQuery that I want to implement in Vue. However, when I try to integrate the jQuery functions into Vue, the functionality doesn't seem to work properly. The panels are not hiding/showing as expected. Does anyone ...

javascriptjqueryvue.js

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

Can I find a better approach to optimize this code?

How can I refactor this code to move the entire DB query logic into a separate file and only call the function in this current file? passport.use( new GoogleStrategy({ clientID: googleId, clientSecret: clientSecret, callbackURL: ...

javascriptnode.jsmongodbmongoose-schema

An issue occurred while calling the Selenium web driver: the driver.get() function couldn't access the attribute "href" of the linked_url, resulting in a stale element reference

Currently, I am utilizing Python with Selenium to work on extracting links from Google search results. After successfully accomplishing this task, I am now attempting to navigate through these links one by one using a for loop and the driver.get() method: ...

pythonhtmlselenium-webdriverdom

Tips for incorporating an HTML file using ng-include in double curly brace syntax {{ }}

Here is the code snippet I am working with: <div ng-repeat="pTabs in child.productTabs" ng-click="toggleProductTab($index)" ng-if="productTabIsActive(pTabs, $index)"> <div ng-repeat="specs in pTab.additionalSpecs"> <p>{{spec ...

javascriptangularjsangularjs-ng-include

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Achieve hover overflow effect in HTML and CSS without altering element positions

Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below: Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (. ...

htmlcss

Using an if else statement in JQuery may not produce the desired results

Hello, I'm currently working on creating a login screen using php & mysql with Jquery(ajax). However, I seem to be encountering an issue with the if else statement in my code. Below is the snippet of my code: $("#btnLogin").click(function(){ ...

phpjqueryajaxpost