DEV Community

Carmen Ansio
Carmen Ansio

Posted on

Button animation hover with CSS

What properties can we animate with CSS?

The animation property allows us animate CSS properties as:

color
position
opacity
Enter fullscreen mode Exit fullscreen mode

“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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

In this animation, we have just two keyframes.

Discussion (0)