|
| 1 | +/* Table of contents |
| 2 | +–––––––––––––––––––––––––––––––––––––––––––––––––– |
| 3 | +- Entrance animations |
| 4 | +- Button hover animations |
| 5 | +- Icon hover animations |
| 6 | +- Footer hover animations |
| 7 | +
|
| 8 | +*/ |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +/* Entrance animations |
| 13 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 14 | + |
| 15 | +.fadein, .button-entrance { |
| 16 | + animation-name: fadein; |
| 17 | + animation-duration: 3s; |
| 18 | + animation-fill-mode: both; |
| 19 | + } |
| 20 | + |
| 21 | +@keyframes fadein { |
| 22 | + from { |
| 23 | + opacity: 0; |
| 24 | + } |
| 25 | + |
| 26 | + to { |
| 27 | + opacity: 1; |
| 28 | + } |
| 29 | +} |
| 30 | + |
| 31 | + |
| 32 | +/* Button hover animations |
| 33 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 34 | +/* (Also apply to icon) */ |
| 35 | + |
| 36 | +.button-hover, .credit-hover{ |
| 37 | + display:inline-block; |
| 38 | + -webkit-transform:perspective(1px) translateZ(0); |
| 39 | + transform:perspective(1px) translateZ(0); |
| 40 | + -webkit-transition-duration:.3s; |
| 41 | + transition-duration:.3s; |
| 42 | + -webkit-transition-property:transform; |
| 43 | + transition-property:transform |
| 44 | +} |
| 45 | +.credit-hover:active, |
| 46 | +.credit-hover:focus, |
| 47 | +.credit-hover:hover{ |
| 48 | + -webkit-transform:scale(1.1); |
| 49 | + transform:scale(1.1) |
| 50 | +} |
| 51 | + |
| 52 | + |
| 53 | +/* Icon hover animations |
| 54 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 55 | + |
| 56 | +.icon-hover{ |
| 57 | + display:inline-block; |
| 58 | +} |
| 59 | + |
| 60 | + |
| 61 | +/* Footer hover animations |
| 62 | +–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
| 63 | + |
| 64 | +.footer-hover{ |
| 65 | + display:inline-block; |
| 66 | + -webkit-transform:perspective(1px) translateZ(0); |
| 67 | + transform:perspective(1px) translateZ(0); |
| 68 | + -webkit-transition-duration:.3s; |
| 69 | + transition-duration:.3s; |
| 70 | + -webkit-transition-property:transform; |
| 71 | + transition-property:transform; |
| 72 | + -webkit-transition-timing-function:ease-out; |
| 73 | + transition-timing-function:ease-out |
| 74 | +} |
| 75 | +.footer-hover:active,.footer-hover:focus,.footer-hover:hover{ |
| 76 | + -webkit-transform:translateY(-8px); |
| 77 | + transform:translateY(-8px) |
| 78 | +} |
0 commit comments