Make a div come alive with animation when hovered over

I'm trying to achieve a rotating effect on a div when the cursor hovers over it, similar to what is shown in this video.

My preference is to utilize keyframes for this animation as they offer more customization options.

div.myElement {
    ...
    animation: mainMenu 2s infinite;
    animation-play-state: initial;
}

div.myElement:hover {
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

Despite implementing the code, I am facing difficulties with defining the necessary attributes for both div.myElement and div.myElement:hover. The transition seems to be from 0% to 100% for div.Element and from 100% back to 0% for div.Element:hover.

css

Answer №1

I created a neat animation featuring a box, just like in this code snippet https://jsfiddle.net/gnox69pv/5/

HTML

<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>

CSS 

    div.myElement {

    background-color: red;
    height: 100px;
    width: 100px;
    margin:10px;
    animation: change_width_back 0.7s forwards;
}
div.myElement:hover {
    animation: change_width 0.7s forwards;
}
@keyframes change_width {
     0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes change_width_back {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Answer №2

Check out this code snippet for a cool animation effect:

<!DOCTYPE html>
<html>
<head>
<style> 
div.myElement {
    width : 100px;
    height : 100px;
    background-color : red;
    transform: rotate(0deg);
    animation-play-state: initial;
}

div.myElement:hover {
animation: mainMenu 2s infinite;
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
</style>
</head>
<body>

<div class="myElement"></div>

</body>
</html>

If you want the box to stay in the same state, you can try this modification:

<!DOCTYPE html>
<html>
<head>
<style> 
div.myElement {
    width : 100px;
    height : 100px;
    background-color : red;
    animation: mainMenu 2s infinite;
    animation-play-state: paused;
}

div.myElement:hover {
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
</style>
</head>
<body>

<div class="myElement"></div>

</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

Display picture within a modal window, regardless of whether it is the identical image

I have a file input that allows the user to upload an image. After selecting an image, a modal opens with the uploaded image displayed inside. You can view a demo of this functionality in action on this Fiddle Example: Here is the corresponding code snip ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting the width of a div element dynamically according to its height

Here is a snippet of my HTML code: <div class="persoonal"> <div class="left"></div> <div class="rigth"></div> </div> This is the CSS code I have written: .profile { width: 100%;} .left { width: 50%; float: le ...

javascripthtmlcss

When the @gridGutterWidth(s) is set to 0px for a flush grid in Bootstrap, the navbar's 'a.brand' breaks onto its

Big shoutout to the amazing StackOverflow community for helping me eradicate countless bugs before they even surfaced. Your crowd sourcing powers are truly magical. I'm in the process of building a website using the Wordpress Roots theme, which is ba ...

htmlcsstwitter-bootstrapgridless

What is the best way to make an HTML element's width automatically adjust based on the margin size?

I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...

htmlcss

Website not employing CSS or JQuery on its server

After creating my site, I tested it locally using XAMPP and it worked perfectly. However, when I hosted it, the CSS and JQuery (Google library) stopped working altogether. The CSS tags are using the standard format: <link rel="stylesheet" type="text/c ...

phpjquerycss

Attempting to retrieve the list of 'Style' for a GtkWidget

Seeking assistance in obtaining a list of style properties for a GtkWidget (GtkButton). Here is the current code I have: #include <gtk/gtk.h> #include <stdio.h> #include <stdlib.h> #include <string.h> int main (int argc, char *argv ...

csscgtk3

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

javascripthtmlcssangularjscontenteditable

Conceal a hidden element underneath a see-through layer featuring an adaptable background image spanning the entire webpage

Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it? Also, can the s ...

css

Issues with functionality of Bootstrap carousel slider

Currently, I'm attempting to put together a Bootstrap carousel slider with indicators by referencing the Bootstrap code. The caption setup is functioning as expected, but I'm encountering issues with the slider itself. The problems I'm faci ...

htmljquerycssbootstrap-5

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

jqueryasp.netcsshtml

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

The impact of animation on vertical scrolling distance

At the moment, I'm utilizing the animation library found at . Whenever I trigger my confetti animation, the Y Scroll steadily rises until the animation completes. I'm curious if there's a method to cap the y-scroll at a certain height. I wo ...

javascriptcssreactjsanimation

Spooky 'outline' emerges with rounded corners in Internet Explorer 11 and Microsoft Edge

I encountered an unusual issue in IE11 and Edge (on Windows 10) where a strange, transparent border appears in the HTML/CSS code. <!DOCTYPE html><html> <head> <style> body { background-color:red; ...

htmlcssinternet-explorer-11microsoft-edge

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

Hindered from implementing a linear gradient

The UI team has provided a linear gradient for the button background in the following format: linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%) I ...

htmlcss

Unusual alignment glitch

Just starting out with HTML and CSS as I build my very first website, I've encountered a baffling alignment and positioning issue that has left me scratching my head. Any help in shedding light on this mystery would be greatly appreciated. To better ...

htmlcsspositioning

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to format a description list with bullet points?

I need to style a <dl> description list that is unordered, so I want bullets before each <dt>. Edit: Just to be clear, I have an unordered list of <dt>-<dd> pairs. They should look like one list item, with the <dt> having a b ...

csshtmlhtml-lists

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom