.anim.fadeIn {
opacity: 0;
animation-name: fadeIn;
- animation-duration: 180ms;
+ animation-duration: 120ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
}
}
-.anim.searchResult {
- opacity: 0;
- transform: translate3d(580px, 0, 0);
- animation-name: searchResult;
- animation-duration: 220ms;
+.search-suggestions-animation{
+ animation-name: searchSuggestions;
+ animation-duration: 120ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
-@keyframes searchResult {
+@keyframes searchSuggestions {
0% {
- opacity: 0;
- transform: translate3d(400px, 0, 0);
+ opacity: .5;
+ transform: scale(0.9);
}
100% {
opacity: 1;
- transform: translate3d(0, 0, 0);
+ transform: scale(1);
}
}
animation-duration: 180ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
+}
+
+@keyframes highlight {
+ 0% {
+ background-color: var(--color-primary-light);
+ }
+ 33% {
+ background-color: transparent;
+ }
+ 66% {
+ background-color: var(--color-primary-light);
+ }
+ 100% {
+ background-color: transparent;
+ }
+}
+
+.anim-highlight {
+ animation-name: highlight;
+ animation-duration: 2s;
+ animation-delay: 0s;
+ animation-timing-function: linear;
}
\ No newline at end of file