<h2>CSS Animations: the <code>cubic-bezier()</code> Function</h2>

  <p>Use the input below to set the values for a cubic-bezier-based timing function. You can use negative values for the y1 and y2 values.</p>

  <div class="box">
  <label for="cubic1">cubic-bezier(</label>
  <input id="cubic1" type="number" step="0.1" min="0" max="1" placeholder="x1">, <input id="cubic2" type="number" step="0.1" placeholder="y1">, <input id="cubic3" type="number" step="0.1" min="0" max="1" placeholder="x2">, <input id="cubic4" type="number" step="0.1" placeholder="y2"> )


  <button>Animate the Box</button> <button disabled>Reset</button>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;

p {
  text-align: left;
  padding: 0 20px;

code {
  color: firebrick;

.box {
  width: 100px;
  height: 100px;
  background: lightpink;
  border: solid 2px;
  margin-bottom: 20px;

.box-animate {
  animation-name: moveObject;
  animation-duration: 2s;
  animation-fill-mode: forwards;

@keyframes moveObject {
  from {
    transform: translateX(0);

  to {
    transform: translateX(600px);

input[type=number] {
  width: 60px;  

button {
  margin-top: 20px;

let myObject = document.querySelector('.box'),
    btn1 = document.querySelector('button'),
    btn2 = document.querySelectorAll('button')[1];

btn1.addEventListener('click', function () {
  myObject.style.animationTimingFunction = `
    cubic-bezier(${document.querySelector('#cubic1').value}, ${document.querySelector('#cubic2').value}, ${document.querySelector('#cubic3').value}, ${document.querySelector('#cubic4').value})`;
  this.disabled = true;
  btn2.disabled = false;
}, false);

btn2.addEventListener('click', function () {
  this.disabled = true;
  btn1.disabled = false;
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.