Button animation hover with CSS

What properties can we animate with CSS?

The animation property allows us animate CSS properties as:

color
position
opacity

“Can I animate?” is a site inspired by Can I use, but focused specifically on CSS animations and transitions.

Animating with CSS

The CSS Animation with keyframes is created defining two main parameters, keyframes and the animation declaration, this allows you to be able to define the animation controlling the time.

The keyframes are defined using the @keyframes at-rule.

@keyframes frankenstein {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
}

You can also define from and to instead of percentages.

Then you have two ways to using the syntax of the animation declaration. The shorthand or the long one.

button  {
    animation: frankenstein 5s ease-in infinite;
}

button  {
    animation-name: frankenstein;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

In this animation, we have just two keyframes.