Creating a repetitive animation effect using CSS3 transforms

I am looking to add an animation effect that creates a "shaking" motion on an image when hovered over. This effect is similar to the shaking of app icons on iPhones when held down for a few seconds.

Ideally, I would like to achieve this using pure CSS3, but I am open to using Javascript/jQuery if necessary.

Currently, I have only been able to create a one-way rotation using pure CSS:

img:hover {
    -webkit-transform: rotate(3deg);
    -webkit-transition: all 0.5s ease-in-out;
}​

http://jsfiddle.net/27UeT/

As for browser compatibility, the only requirement is that it works in Chrome.

jquerycss

Answer №1

After finding inspiration from the m90 link, I was able to create the following code:

http://jsfiddle.net/27UeT/1/

img:hover {

    -webkit-animation-name: thumb;
    -webkit-animation-duration: 1000ms;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite; /* The magic keyword for infinite*/
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes thumb {
    0% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(3deg); }
}

Answer №2

If you are looking for a solution using javascript and jQuery, I have developed a fun shaking effect on jsFiddle.
I have implemented custom animations in jQuery to create a subtle shaking effect on hover.
Please note that this effect works best when the image is positioned as absolute.

Update: For an even more dynamic shaking effect, check out this 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

Retrieve data from a div element on a webpage using specific parameters

As I work on a form that includes various filters and a "Start" button in C# / ASP.NET MVC, my goal is to display database data in a partial view using Ajax when the button is clicked, based on certain parameters. Within this partial view, there is a link ...

javascriptc#jqueryajaxasp.net-mvc

Numerous pop-up windows displaying a variety of distinct content in each one

While working on a website, I came across a helpful jQuery pop-up function that I found on Stack Overflow. The original post can be found here. I am trying to customize each pop-up box so they contain different content from the .pop1 and .pop2 divs (parag ...

javascriptjqueryhtmlpopup

Prevent multiple requests on jQuery infinite scrolling

I have implemented pagination on my website where the next page is loaded automatically when the user reaches the bottom of the page. This is achieved by using jQuery's .on('scroll', this.detectScroll()) method which triggers a function to l ...

javascriptjqueryajaxeventsinfinite-scroll

Is there a way to use JavaScript to alter the existing URL?

Currently, I am utilizing a select tag to allow users to choose the number of 'rows' displayed on the table. <%=select_tag :per_page, options_for_select([10,20,50,100]....some more code...., onchange => "if (this.value) {windows.location=& ...

javascriptjqueryhtmlruby-on-railsurl

Hierarchy segment for CSS selection

I have a rather unique query. How can I create a selector that targets a specific part of the hierarchy based on classes? For instance, I'd like to select something like: <node class="start-selection"> <node> <n ...

css

Guide to positioning an item at the bottom of the screen using Material UI

Can anyone help me align a button to the bottom of the screen so that it remains in place even when scrolling through a list? I've tried adjusting the code but can't seem to get it right. This is how my current screen appears, with the button al ...

htmlcssreactjsmaterial-ui

How to align items at the center in material-ui styling

I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced. This is ...

cssreactjsmaterial-ui

set a hyperlink for the dropdown selection bar

My question is quite simple! I have a database project using PHP, but we are required to use a language that we are not very familiar with. I want to create a drop-down list of different types of cuisine using PostgreSQL (see code below for an example). Th ...

phpjquerypostgresql

What sets apart the <img> and <Image> layout attributes in NextJS?

While working on custom checkboxes, I came across a unique situation - the only way the positioning of the checkboxes aligns properly is if the classes '.init' and '.hover' are assigned to images, and the class '.done' is disp ...

csscheckboxnext.js

Deactivate the collapse toggle feature in the footer navigation

I've recently started using bootstrap and I'm having some trouble adding a social nav footer to my portfolio. I've experimented with removing different classes and even tried using the sticky footer feature, but it's not quite what I ne ...

javascripthtmlcssbootstrap-4

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

function executed when meteor template finishes loading all content

Here is a template structure that I am working with: <template name="mainEvents"> <section class="main-events-list events-list js-content-slider"> {{#each events}} <div class="events-list-item"> &l ...

javascriptjquerymeteor

How to extract the selected text within an input field using jQuery without relying on external plugins

Is it possible to retrieve the value of a selection made using jQuery's .select(); method? http://api.jquery.com/select/ I am looking for a way to obtain the selected characters within a text or input box without relying on any external plugins. ...

jquery

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

The xmlHttp.getResponseHeader method is currently ineffective with CORS

My ASP.NET WCF on .NET 4 is used for user authentication. When submitting a username and password, an HTTP Header should be returned with the authentication cookie included. The process works correctly when accessing a locally hosted test page. However, I ...

jquerywcfauthenticationwcf-securitycors

Designing custom gridviews using CSS in an ASP.NET application with Bootstrap

Hey there, I'm currently working on a post system using GRIDVIEW in ASP.NET/BOOTSTRAP. Since GRIDVIEW is basically a table, I am using templatefild and itemtemplate with table td and tr to make it resemble a BLOG! Everything is going well so far, I ha ...

c#cssasp.nettwitter-bootstrapgridview

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

After my carousel moves past 10000 pixels, it starts flickering through multiple elements. I'm utilizing jCarousel Lite: Could this be a jQuery-related issue? My initial assumption is that it may be specific to jCarousel Lite, but there doesn't ...

javascriptjqueryjcarouselcarouselpixel

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

javascriptjqueryhtmlangularjsangularjs-directive

Having trouble adjusting the width of the text input in the inline search box form with an input group dropdown

Looking to create a search box similar to this design: https://i.sstatic.net/H93WQ.png What is the most effective way to implement this using Bootstrap? I tried using an inline form and input group dropdown list, but I encountered issues with the text i ...

htmlcsstwitter-bootstraptwitter-bootstrap-3