DEV Community

Nguyễn Hữu Hiếu
Nguyễn Hữu Hiếu

Posted on

css animation: animate when hover

#css #animation

Senarior

  • Want to simple animation when hover an element

Demo

Demo image

Code 

<!DOCTYPE html> <html> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } div { width: 100px; height: 100px; position: relative; border: solid 2px black; } div:hover { animation: hoverDiv 1s forwards; } @keyframes hoverDiv { 100% { box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; border: solid 2px whitesmoke; } } </style> </head> <body> <div>Hover me</div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)