#212121
1.notification { 2 display: flex; 3 width: 0; 4 background: #ddd; 5 border-radius: 10px; 6 animation: slideIn 1s ease-in-out 1.25s forwards; 7} 8 9.notification-info { 10 display: inline-flex; 11 overflow: hidden; 12 background-color: #181818; 13 color: #fff; 14 width: 100%; 15 border-radius: 12px 8px 8px 12px; 16 padding-left: 16px; 17 align-items: center; 18} 19 20.notification-text { 21 opacity: 0; 22 padding: 10px 8px; 23 white-space: nowrap; 24 animation: textInfo 1s ease-in-out 1.5s forwards; 25} 26 27.highlight { 28 color: #ffc300; 29} 30 31.box-avatar { 32 background-color: #181818; 33 padding: 6px; 34 width: 4.5em; 35 height: 4.5em; 36 border-radius: 50%; 37 margin-right: -20px; 38 box-shadow: 6.2px 3.1px 38.2px -6px rgba(0, 0, 0, 0.2), 63px 32px 176px -6px rgba(0, 0, 0, 0.1); 39 z-index: 1; 40} 41 42.avatar { 43 background-color: #FDA203; 44 padding: .6em; 45 border-radius: 50%; 46} 47 48.avatar-icon { 49 width: 100%; 50 height: 100%; 51 fill: white; 52 animation: grow 2s ease-in-out 3; 53} 54 55/*Animations*/ 56@keyframes slideIn { 57 0% { 58 width: 0; 59 padding: 2px; 60 } 61 62 100% { 63 width: 250px; 64 padding: 2px; 65 } 66} 67 68@keyframes textInfo { 69 0% { 70 opacity: 0%; 71 margin-left: -20em; 72 } 73 74 100% { 75 opacity: 100%; 76 margin-left: 0; 77 } 78} 79 80@keyframes grow { 81 0% { 82 transform: scale(100%) translateY(0%); 83 } 84 85 50% { 86 transform: scale(100%) translateY(-10%); 87 } 88 89 100% { 90 transform: scale(100%) translateY(0%); 91 } 92}
Comments
MIT License