Creating a continuous loop animation with CSS hover state

This piece of code creates an interesting effect when the text is hovered over. The slight shakiness adds a cool touch to it. However, this effect only occurs when the mouse is moved slowly; if the mouse remains stationary, the hover style takes precedence.

Is there a way to maintain the shakiness (or rapid switching, to put it simply) even when the mouse is still? Perhaps transitioning at least 5 times between the hover style and non-hover style with CSS3. I am aware that this can be achieved with JavaScript, but I'm curious about the CSS approach, although incorporating a bit of JS wouldn't be a problem.

HTML

<div id="intro"><h1>Lorem Ipsum<br>dolor</h1></div>

CSS

#intro {
      font-family: 'Pacifico', cursive;
      color: #fff;
      text-align: center;}

#intro:hover {
      font-family: 'Lobster', cursive;}

http://jsfiddle.net/h9306qq5/

--UPDATE

Alternatively, is there a way to create an effect that transitions between the non-hovered and hover styles at a defined interval or for a set number of times when hovered over?

jqueryhtmlcss

Answer №1

To achieve your desired outcome, consider using jQuery to simplify the process. An example implementation could look like this:

$('#intro').on('hover', function() {
  var that = $(this);
  that.css('font-family', "'Pacifico', cursive;");
}, function() {
  var that = $(this);
  setTimeout(function() { 
    that.css('font-family', "'Lobster', cursive;");
  }, 500);
});

If you need a longer transition time between font switches, simply adjust the timeout value.

For a demonstration without custom fonts included, view this JSFiddle link: JSFiddle

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

Subpar resolution of PNG images displayed in HTML canvas

My attempt to draw a PNG image onto the canvas is resulting in poor quality. I am using the drawImage method as shown below: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImag ...

javascripthtmlcanvaspngdrawimage

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

javascripthtmlcssbootstrap-modalbootstrap-5

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

javascripthtmlangularjs

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

To separate a lengthy string, I followed the approach outlined in this post: .line { display: inline-block; } <p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </ ...

htmlcss

Modifying the color of a header through clicking on a specific anchor link

My goal is to create a fixed side nav bar on my webpage with an unordered list that links down the page using anchors. In addition, I want to dynamically change the color of an h2 element based on which item in the fixed nav bar is clicked on. For instan ...

javascriptjquerycolorshtml-lists

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology: I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .container { width: 600px; } .speaker ...

css

Encountering a difficulty in sending data to the server through ajax with Cordova

I am currently working on a Phonegap Cordova project and I'm trying to send data to the server using AJAX but I'm encountering an error. Here is an example of my code: $(document).ready(function() { $('#frm').submit(function() ...

javascriptjqueryajaxcordovaphonegap

Refresh tab URLs for dynamic tabs with jQuery UI

Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...

jqueryhtmljquery-ui

Utilize Javascript to Populate Form Fields Based on "Selected Name"

I am currently facing a challenge in using javascript to automatically populate a form, specifically when it comes to setting the value for the country field. <form action="/payment" method="post" novalidate=""> <div class="input_group"> ...

javascripthtml

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

javascripthtml

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass

Jspsych: Centering and aligning 3 p tags to the left on the page

Feeling pretty stuck at the moment. Here's what I have visually right now: I added a caption in Comic Sans and an arrow using MS Paint. Each line with color swatches is wrapped in a p tag. The goal is to center these p tags on the page (as they are ...

javascripthtmlcssjspsych

Ensure uniform column width for recurring rows in CSS grid, irrespective of content width

Is there a way to ensure that a CSS grid maintains the same width for repeating rows, even if the content in each cell varies in length? I am attempting to set column 1 to be 10% width, column 2 to be 45% width, and allocate the remaining space to column ...

csscss-grid

Utilizing the '<' or '>' operator in combination with an if statement within a Repeater component

Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...

htmlasp.netif-statement

How can I efficiently utilize a single piece of code in multiple instances within a jQuery HTML project?

In order to perform 90 calculations similar to the code below, I am looking for a way to streamline the process and reduce the amount of code needed. $(document).ready(function () { $("#btn").click(function () { var v1 = parseInt($("#1val&q ...

jqueryfunction

Converting a PHP timestamp to a jQuery-compatible format

Can someone help me find the equivalent function in jQuery that will give me a time format similar to this: date( 'Y-m-d\TH:i:sP'); //the output is like this. 2013-10-30T18:10:28+01:00 I am looking for this specific format in jQuery to use ...

javascriptjqueryjson

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

jQuery UI datepicker: Despite my attempt to convert with strtotime, the date is showing as 1969

I am currently working on a room reservation application that uses PHP and JQuery. I have implemented a datepicker widget for selecting dates, but I am facing an issue. When I try to convert the selected date from dd/mm/yyyy format to YYYY-mm-dd format in ...

phpjquerydatepicker

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope