How create slide in from right to left?

My component:

<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" x:Name="grid">
      <Grid.RowDefinitions>
                <RowDefinition Height="30" />
      </Grid.RowDefinitions>
      <Entry Grid.Row="0" x:Name="textField" Keyboard="Text" BackgroundColor="#a6ffffff" 
                  Placeholder="{ext:Translate Search_placeholder}" Opacity="0" />

      <Image Source="Search.png" HorizontalOptions="StartAndExpand" WidthRequest="25" HeightRequest="25">
           <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="Image_Tapped" />
          </Image.GestureRecognizers>
      </Image>
 </Grid>

Animation:

void Image_Tapped(object sender, EventArgs e)
{
      var img = sender as Image;

      var animation = new Animation();

      var textFieldTranslate = new Animation(v => textField.TranslationX = v, img.Width img.Width - 300);
      var textFieldChangeWidth = new Animation(v => textField.WidthRequest = v, 0, 300);
      var textFieldChangeOpacity = new Animation(v => textField.Opacity = v, 0, 1);

      animation.Add(0, 1, textFieldTranslate);
      animation.Add(0, 1, textFieldChangeWidth);
      animation.Add(0, 0.2, textFieldChangeOpacity);

      animation.Commit(this, "Slide", 1000, 500, Easing.Linear);
}

My animation is twitching. How can I fix it? Or maybe there are other options?