DEV Community

Carmen Ansio
Carmen Ansio

Posted on

5 3

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay