diff options
Diffstat (limited to 'pydis_site/static/css')
| -rw-r--r-- | pydis_site/static/css/home/timeline.css | 80 | 
1 files changed, 80 insertions, 0 deletions
| diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 89de0887..0a4dfbb6 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3638,6 +3638,14 @@ mark {          -webkit-animation-name: cd-bounce-2-inverse;          animation-name: cd-bounce-2-inverse      } +    .cd-timeline__img--bounce-out { +        -webkit-animation: cd-bounce-out-1 0.6s; +        animation: cd-bounce-out-1 0.6s; +    } +    .cd-timeline__content--bounce-out { +        -webkit-animation: cd-bounce-out-2 0.6s; +        animation: cd-bounce-out-2 0.6s; +    }  }  @-webkit-keyframes cd-bounce-1 { @@ -3741,3 +3749,75 @@ mark {          transform: translateX(0)      }  } + +@-webkit-keyframes cd-bounce-out-1 { +    0% { +        opacity: 1; +        -webkit-transform: scale(1); +        transform: scale(1) +    } + +    60% { +        -webkit-transform: scale(1.2); +        transform: scale(1.2) +    } + +    100% { +        opacity: 0; +        -webkit-transform: scale(0.5); +        transform: scale(0.5) +    } +} + +@keyframes cd-bounce-out-1 { +    0% { +        opacity: 1; +        -webkit-transform: scale(1); +        transform: scale(1); +    } + +    60% { +        -webkit-transform: scale(1.2); +        transform: scale(1.2); +    } + +    100% { +        opacity: 0; +        -webkit-transform: scale(0.5); +        transform: scale(0.5); +    } +} + +@-webkit-keyframes cd-bounce-out-2 { +    0% { +        opacity: 1; +        -webkit-transform: translateX(0); +        transform: translateX(0) +    } +    60% { +        -webkit-transform: translateX(20px); +        transform: translateX(20px) +    } +    100% { +        opacity: 0; +        -webkit-transform: translateX(-100px); +        transform: translateX(-100px) +    } +} + +@keyframes cd-bounce-out-2 { +    0% { +        opacity: 1; +        -webkit-transform: translateX(0); +        transform: translateX(0) +    } +    60% { +        -webkit-transform: translateX(20px); +        transform: translateX(20px) +    } +    100% { +        opacity: 0; +        -webkit-transform: translateX(-100px); +        transform: translateX(-100px) +    } +} | 
