|
| 1 | +/* ************************************************************* */ |
| 2 | +/* |
| 3 | +/* Use this file to add custom CSS animations. |
| 4 | +/* Delete this file if you wish to use the default animations. |
| 5 | +/* If you do not want to have animations in your theme, |
| 6 | +/* remove or comment them and include this file in your theme. |
| 7 | +/* |
| 8 | +/* ************************************************************* */ |
| 9 | + |
| 10 | + |
| 11 | +/* Table of contents |
| 12 | +–––––––––––––––––––––––––––––––––––––––––––––––––– |
| 13 | +- Entrance animations |
| 14 | +- Button hover animations |
| 15 | +- Icon hover animations |
| 16 | +- Footer hover animations |
| 17 | +
|
| 18 | +*/ |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +/* Entrance animations |
| 23 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 24 | + |
| 25 | +.button-entrance { |
| 26 | + animation-name: popUp; |
| 27 | + animation-duration: 1s; |
| 28 | + animation-fill-mode: both; |
| 29 | + /* Used to start button entrance animation one after another */ |
| 30 | + animation-delay: calc(var(--delay)/10); |
| 31 | + } |
| 32 | + |
| 33 | +@keyframes popUp { |
| 34 | + from { |
| 35 | + opacity: 0; |
| 36 | + transform: scale3d(0.3, 0.3, 0.3); |
| 37 | + } |
| 38 | + |
| 39 | + 50% { |
| 40 | + opacity: 1; |
| 41 | + } |
| 42 | +} |
| 43 | + |
| 44 | +.fadein { |
| 45 | + animation-name: fadein; |
| 46 | + animation-duration: 3s; |
| 47 | + animation-fill-mode: both; |
| 48 | + } |
| 49 | + |
| 50 | +@keyframes fadein { |
| 51 | + from { |
| 52 | + opacity: 0; |
| 53 | + } |
| 54 | + |
| 55 | + to { |
| 56 | + opacity: 1; |
| 57 | + } |
| 58 | +} |
| 59 | + |
| 60 | + |
| 61 | +/* Button hover animations |
| 62 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 63 | +/* (Also apply to icon) */ |
| 64 | + |
| 65 | +.button-hover, .credit-hover{ |
| 66 | + display:inline-block; |
| 67 | + -webkit-transform:perspective(1px) translateZ(0); |
| 68 | + transform:perspective(1px) translateZ(0); |
| 69 | + box-shadow:0 0 1px rgba(0,0,0,0); |
| 70 | + -webkit-transition-duration:.1s; |
| 71 | + transition-duration:.1s; |
| 72 | + -webkit-transition-property:transform; |
| 73 | + transition-property:transform |
| 74 | +} |
| 75 | +.button-hover:active,.credit-hover:active, |
| 76 | +.button-hover:focus,.credit-hover:focus, |
| 77 | +.button-hover:hover,.credit-hover:hover{ |
| 78 | + -webkit-transform:scale(1.02); |
| 79 | + transform:scale(1.02) |
| 80 | +} |
| 81 | + |
| 82 | + |
| 83 | +/* Footer hover animations |
| 84 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 85 | + |
| 86 | +.footer-hover{ |
| 87 | + display:inline-block; |
| 88 | + -webkit-transform:perspective(1px) translateZ(0); |
| 89 | + transform:perspective(1px) translateZ(0); |
| 90 | + box-shadow:0 0 1px rgba(0,0,0,0); |
| 91 | + -webkit-transition-duration:.3s; |
| 92 | + transition-duration:.3s; |
| 93 | + -webkit-transition-property:transform; |
| 94 | + transition-property:transform; |
| 95 | + -webkit-transition-timing-function:ease-out; |
| 96 | + transition-timing-function:ease-out |
| 97 | +} |
| 98 | +.footer-hover:active,.footer-hover:focus,.footer-hover:hover{ |
| 99 | + -webkit-transform:translateY(-8px); |
| 100 | + transform:translateY(-8px) |
| 101 | +} |
0 commit comments