twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

feat: add like button animation

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-25 19:28:59 -04:00
parent d474bcfcd3
commit 9296e92032
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/style.css
View File

@@ -185,6 +185,7 @@ article li {
.like-icon {
cursor: pointer;
transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.like-icon:hover {
color: #fff;
@@ -197,3 +198,14 @@ article li {
.like-icon.liked:hover {
transform: scale(1.15);
}
.hint-animation {
animation: wobble 1s ease-in-out 2;
}
@keyframes wobble {
0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
15% { transform: translateX(-3px) rotate(-7deg) scale(1.1); }
30% { transform: translateX(2px) rotate(5deg) scale(1.2); }
45% { transform: translateX(-1px) rotate(-5deg) scale(1.2); }
60% { transform: translateX(1px) rotate(3deg) scale(1.1); }
75% { transform: translateX(0) rotate(-1deg) scale(1); }
}