Issue with CSS3 animations

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 1s;
}

@-webkit-keyframes {
  0% {background-color:#4CAF50;}
25%  {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
  height: 250px;
  min-width: 200px;
  font-size: 75px;
  font-family: american captain;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>

I've recently delved into exploring CSS3 animations. The animations I've been working on have been running smoothly, except for the color change using 'keyframes'. Even though I followed a tutorial closely that showed the exact procedure, this specific part isn't functioning as expected in my project. Any pointers or assistance would be greatly valued. Thanks :-)

cssanimation

Answer №1

To implement the animation, assign a name to it and then utilize that animation as a property.

@-webkit-keyframes color-change {
  0% {
    background-color: #4CAF50;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: blue;
  }
  100% {
    background-color: orange;
  }
}

.button {
  animation: color-change 12s ease infinite;
}


.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  animation: color-change 12s ease infinite;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 1s;
}
@-webkit-keyframes color-change {
  0% {
    background-color: #4CAF50;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: blue;
  }
  100% {
    background-color: orange;
  }
}
.button2:hover {
  height: 250px;
  min-width: 200px;
  font-size: 75px;
  font-family: american captain;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>

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

Guide to utilizing custom fonts in a VUE application

I'm currently working on my first Vue project and despite following various examples and the official documentation, I am struggling to resolve an issue regarding importing fonts locally in my project. https://i.sstatic.net/mXryH.png Within my `` tag ...

htmlcssvue.jsfontsfont-face

Guidelines for dynamically passing HTML attribute values into a CSS selector using a variable in Protractor

After successfully locating the button on the row using its value stored in the "title" HTML attribute, I am now faced with the task of passing a dynamic value to this attribute. To achieve this, I have declared it as a variable. However, I am unsure about ...

cssprotractor

React App Showing Scrollbar When Material UI AppBar is Present

I'm encountering a straightforward issue in my React application. How can I get rid of the scrollbar on my page? It seems like the problem arises from the height value I set to 100vh. However, upon removing the AppBar, the scrollbar disappears. Any su ...

cssreactjsmaterial-uireact-hooksstyled-components

Ways to reduce lag while executing a for loop

How can I optimize my prime number generation process to avoid lagging? For example, is there a way to instantly display the results when generating primes up to 1000? HTML: <!DOCTYPE html> <html> <meta name="viewport" content="width=dev ...

javascripthtmlcssprimes

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me: white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...

htmlcssstyling

Can content be easily added to the header section of numerous HTML files simultaneously, eliminating the need to access each file individually?

I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...

htmlcssstylesheet

What is the best way to ensure that this header remains adaptable to different screen

Looking for guidance on creating a fluid and responsive header design similar to the curved images shown at this link or this link. How can I ensure that my design maintains its shape without distortion when viewed on different devices? Any suggestions a ...

css

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

Contenteditable feature dynamically styling text upon input

Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable? On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program. ...

jquerycsshtml

Creating a dynamic layout by combining Flexbox CSS and Bootstrap for optimal responsiveness

After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...

csstwitter-bootstrapflexboxbootstrap-5

The car glides smoothly across the screen from left to right before disappearing from view

I'm looking to create an animation where a car moves from left to right and then switches to another image moving from right to left. Can anyone provide assistance with this task? Here's the code I have so far: .car-movement { position: a ...

htmlcss

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

Change the visibility of a div's content when a radio button is selected with only CSS

When the radio buttons are on the same div level as "content1" and "content2", it works properly. But how can I make it work if I move the radio buttons to another div outside of the "second" div? For example, if toggle1 is checked then content1 should be ...

htmlcss

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console! I encountered an unusual bug where the Bootstrap nav-tab functionality ...

javascriptjqueryhtmlcss

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: My goal is to set up a "css" directory within the "static" directory under the "resources" section so that I ...

javacssspringspring-bootintellij-idea

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

cssreactjs