<div class="wrapper">
    <div class="flex">
      <div class="container">
        <div class="flex__row">
          <div class="flex__item ease">ease</div>
          <div class="flex__item ease__in">ease-in</div>
          <div class="flex__item ease__out">ease-out</div>
          <div class="flex__item easeinout">ease-in-out</div>
          <div class="flex__item linear">linear</div>
          <div class="flex__item steps">steps</div>
          <div class="flex__item cubic">cubic-bezier</div>
        </div>
      </div>
    </div>
  </div>

* {
  padding: 0;
  margin: 0;
  border: 0;
}
 
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 
:focus, :active {
  outline: none;
}
 
a:focus, a:active {
  outline: none;
}
 
nav, footer, header, aside {
  display: block;
}
 
html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
 
input, button, textarea {
  font-family: inherit;
}
 
input::-ms-clear {
  display: none;
 }
 
button {
  cursor: pointer;
 }
 
button::-moz-focus-inner {
  padding: 0;
  border: 0;
 }
 
a, a:visited {
  text-decoration: none;
 }
 
a:hover {
  text-decoration: none;
 }
 
ul li {
  list-style: none;
 }
 
img {
  vertical-align: top;
 }
 
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
 }
 
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 }

.wrapper {
  min-height: 100%;
  overflow: hidden;
}

.flex {
  padding: 60px;
}

.container {
  margin: 0 auto;
  max-width: 1180px;
}

.flex__row {
  display: flex;
  flex-direction: column;
}

.flex__item {
  margin: 0 0 30px 0;
  padding: 10px 0 0 30px;
  width: 400px;
  height: 60px;
  color: #fff;
  font-size: 36px;
  border-radius: 8px;
}

.flex__item:last-child {
  margin: 0;
}

.ease {
  background: linear-gradient(-45deg, rgba(204,232,136,1) 0%, rgba(204,232,136,1) 19%, rgba(113,173,43,1) 53%, rgba(64,162,203,1) 100%);
  transition: all 0.5s ease;
}

.ease:hover {
  width: 700px;
}

.ease__in {
  background: linear-gradient(-90deg, rgba(123,223,167,1) 0%, rgba(123,223,167,1) 19%, rgba(34,136,79,1) 53%, rgba(58,34,136,1) 100%);
  transition: all 0.5s ease-in;
}

.ease__in:hover {
  width: 700px;
}


.ease__out {
  background: linear-gradient(-75deg, rgba(255,204,122,1) 0%, rgba(255,204,122,1) 19%, rgba(165,41,89,1) 53%, rgba(69,6,102,1) 100%);
  transition: all 0.5s ease-out;
}

.ease__out:hover {
  width: 700px;
}

.easeinout {
  background: linear-gradient(-45deg, rgba(204,232,136,1) 0%, rgba(204,232,136,1) 19%, rgba(113,173,43,1) 53%, rgba(64,162,203,1) 100%);
  transition: all 0.5s ease-in-out;
}

.easeinout:hover {
  width: 700px;
}

.linear {
  background: linear-gradient(-90deg, rgba(123,223,167,1) 0%, rgba(123,223,167,1) 19%, rgba(34,136,79,1) 53%, rgba(58,34,136,1) 100%);
  transition: all 0.5s linear;
}

.linear:hover {
  width: 700px;
}

.steps {
  background: linear-gradient(-75deg, rgba(255,204,122,1) 0%, rgba(255,204,122,1) 19%, rgba(165,41,89,1) 53%, rgba(69,6,102,1) 100%);
  transition: all 0.5s steps(5, start);
}

.steps:hover {
  width: 700px;
}


.cubic {
  background: linear-gradient(-45deg, rgba(204,232,136,1) 0%, rgba(204,232,136,1) 19%, rgba(113,173,43,1) 53%, rgba(64,162,203,1) 100%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cubic:hover {
  width: 700px;
}