#aramakutusu{display:inline-block;width:200px;}
#aramakutusu input[text]:focus{width:100%; display:block;z-index:9999;}

@keyframes genisle {
0% {
opacity: 0;
transform: translateX(-200px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.genisle {
animation-name: genisle;
}


Denedim oldu ama olup olmaması sitendeki diğer elemanlara bağlı.