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

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

Is it possible for a div with fixed position to still have scrolling functionality

My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification Below is the code snippet in question: <div id="stoerer"> <button ...

javascriptjqueryhtmlcsssass

Text Description: "Important Information Hidden Beneath Persistent Bar"

I have a website with a sticky header (position: fixed), and despite adding extra padding to the body, the main content Header and part of the paragraph are still hidden behind the fixed header. This issue only occurs on the homepage and on screens smaller ...

htmlcssheadersticky

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

cssreactjsmaterial-uicss-selectorsjsx

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

javascriptjqueryhtmlcssanimation

Content duplication occurs when sharing information

After clicking the share button on a user's link, the post is successfully shared but appears twice. Upon inspecting through Firebug, it reveals two POST requests being triggered when the button is clicked once, resulting in duplicate posts being inse ...

phpjqueryhtmlajax

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

javascripthtmlcss

Looking to pass a confidential input parameter to a MVC controller via AngularJS

I'm trying to figure out how to pass a hidden input field value to my MVC controller. $http({ method: 'GET', url: '/User/GetProjectsList' }) .success(function (data, status, headers, config) { $scope.workflow = []; ...

c#jqueryangularjsmodel-view-controller

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

csstwitter-bootstrap

Clearing HTML input connected to PHP and AJAX: A handy guide

Is there a way to automatically clear my HTML input after pressing the enter key? I have a complex program that utilizes AJAX and PHP. I attempted to use jQuery's $("#txt").val('') function, but it clears every letter typed (I only want to c ...

phpjqueryajax

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

The issue with Infinite Scrolling/Pagination feature in backbone.js persists

My goal is to implement an infinite scroll feature similar to Twitter using the Pagination plugin for backbone.js. Clicking the button/link #pagination a should load the next page of results from the backend and append it to the current view PhotoListView. ...

javascriptjqueryajaxbackbone.jsunderscore.js

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

javascripthtmlvue.js

Steps to Import an Image from a Subdirectory:

Currently, I am working on C# and HTML. While working on a view page, I encountered an issue when trying to load images from subfolders. When attempting to load an image from the immediate folder, it opens correctly. For example: <img data-u="image" s ...

c#html

Is it possible to change the order of elements in the navbar using HTML/Bootstrap depending on the state of the responsive menu toggle?

I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8. When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes: ...

htmlcssangularbootstrap-4

Error: Encountered an unexpected token F while trying to make a POST request using $http.post and Restangular

In our current project, we are utilizing Angular and making API calls with Restangular. Recently, I encountered an error while trying to do a POST request to a specific endpoint. The POST call looked like this: Restangular.one('aaa').post(&apos ...

javascriptjqueryangularjsdrupalrestangular

Unexpected lag causing delays in jQuery animations

I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...

javascriptjqueryanimation

Positioning the icon within the input field

I am facing a couple of challenges. I have chosen to utilize focus and blur for text values in input fields instead of placeholder text due to an issue in Chrome where the placeholder text is centered. My goal is to position the icon in the input field, p ...

cssiconsalignment

I need to figure out how to nest a div inside of a ul-li-a and ensure that the text inside the

In my search button, I have a cached list of options. When I select one, it should trigger the menu and choose the correct option. However, I am having trouble comparing the innerText of a div with the selected option from the search area. Both a and div e ...

javascriptjqueryhtmljquery-ui