<div class="container">
  <div class="demo">
    <div class="title">ease: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease.png" alt="ease" >
    </div>
  </div>
  <div class="demo">
    <div class="title">linear: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/linear.png" alt="linear">
    </div>
  </div>
    
  <div class="demo">
    <div class="title">ease-in: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-in.png" alt="ease-in">
    </div>
  </div>
  <div class="demo">
    <div class="title">ease-out: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-out.png" alt="ease-out">
    </div>
  </div>
  <div class="demo">
    <div class="title">ease-in-out: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-in-out.png" alt="ease-in-out">
    </div>
  </div>
</div>

.container {
  background-color: #f1f1f1;
  width: 100%;
}

.demo {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-bottom: 5px;
}

.container:hover img {
  transform: translateX(300px);
}

.demo .title {
  flex: 2;
  text-align: right;
  margin-right: 10px;
}
.demo .content {
  flex: 6;
}
.demo .content img {
  width: 80px;
  height: 80px;
  vertical-align: bottom;
}

.container .demo:nth-child(1) img {
  transition: transform ease 1s;
}
.container .demo:nth-child(2) img {
  transition: transform linear 1s;
}
.container .demo:nth-child(3) img {
  transition: transform ease-in 1s;
}
.container .demo:nth-child(4) img {
  transition: transform ease-out 1s;
}
.container .demo:nth-child(5) img {
  transition: transform ease-in-out 1s;
}