* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#duck {
    width: 350px;
    position: absolute;
    /*left: calc(50% - 300px);
    top: 100px;*/
    transition: all 0.3s cubic-bezier(1, -0.25, 0, 1.21);
}

body {
    background-color: antiquewhite;
    width: 100%;
    height: 100vh;
}

.move {
    transform: translateX(500px);
    animation: shake 0.5s;
    animation-iteration-count: 1;
}

@keyframes shake {
    0% { translate:1px 1px; rotate:0deg; }
    10% { translate:-1px -2px; rotate:1deg; }
    20% { translate:-3px 0px; rotate:1deg; }
    30% { translate:3px 2px; rotate:0deg; }
    40% { translate:1px -1px; rotate:1deg; }
    50% { translate:-1px 2px; rotate:1deg; }
    60% { translate:-3px 1px; rotate:0deg; }
    70% { translate:3px 1px; rotate:1deg; }
    80% { translate:-1px -1px; rotate:1deg; }
    90% { translate:1px 2px; rotate:0deg; }
    100% { translate:1px -2px; rotate:1deg; }
  }