WordPress.org
Get WordPress

Plugin Directory

Changeset 3490930


Ignore:
Timestamp:
03/25/2026 12:47:51 PM (7 days ago)
Author:
pagepin
Message:

Update icon.svg: animation loop

File:
1 edited

Legend:

Unmodified
Added
Removed

  • pagepin/assets/icon.svg

    r3490924 r3490930  
    44      @keyframes dropIn {
    55        0% { transform: translateY(-40px); opacity: 0; }
    6         40% { opacity: 1; }
    7         65% { transform: translateY(6px); }
    8         82% { transform: translateY(-3px); }
    9         100% { transform: translateY(0); opacity: 1; }
     6        16% { opacity: 1; }
     7        26% { transform: translateY(6px); }
     8        33% { transform: translateY(-3px); }
     9        40% { transform: translateY(0); opacity: 1; }
     10        80% { transform: translateY(0); opacity: 1; }
     11        90% { transform: translateY(-8px); opacity: 0.6; }
     12        100% { transform: translateY(-40px); opacity: 0; }
    1013      }
    1114      @keyframes glow {
    … …  
    1518      @keyframes rippleExpand {
    1619        0% { r: 4; opacity: 0.7; stroke-width: 3px; }
     20        20% { r: 35; opacity: 0; stroke-width: 0.5px; }
    1721        100% { r: 35; opacity: 0; stroke-width: 0.5px; }
    1822      }
    1923      @keyframes shadowFade {
    2024        0% { opacity: 0; }
    21         100% { opacity: 0.25; }
     25        20% { opacity: 0.25; }
     26        80% { opacity: 0.25; }
     27        100% { opacity: 0; }
    2228      }
    2329      .pin-group {
    24         animation: dropIn 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
     30        animation: dropIn 4s cubic-bezier(0.34,1.56,0.64,1) infinite;
    2531        transform-origin: 128px 120px;
    2632        opacity: 0;
    2733      }
    2834      .pin-glow {
    29         animation: glow 3s ease-in-out 1.5s infinite;
     35        animation: glow 3s ease-in-out 0.8s infinite;
    3036      }
    3137      .ripple {
    32         animation: rippleExpand 1s ease-out 0.6s forwards;
     38        animation: rippleExpand 4s ease-out 0.6s infinite;
    3339        opacity: 0;
    3440      }
    3541      .pin-shadow {
    36         animation: shadowFade 0.4s ease-out 0.5s forwards;
     42        animation: shadowFade 4s ease-out 0.5s infinite;
    3743        opacity: 0;
    3844      }
Note: See TracChangeset for help on using the changeset viewer.