.baraban { height: 780px; width: 780px; background-color: #FFFFFF; border-radius: 59px; overflow: hidden; } .wrapper__works { // position: relative; transform: translateY(-50px); //animation: scroll 3s linear infinite; //transition-timing-function: linear; //transition: 3s ease-in-out; // display: flex; } .go { // position: relative; //transform: translateY(-50px); animation: scroll 2.2s linear infinite; //transition-timing-function: linear; //transition: 3s ease-in-out; // display: flex; } .stop { // position: relative; transform: translateY(-2390px); animation: stop 6s linear 1; //transition-timing-function: linear; //transition: 3s ease-in-out; // display: flex; } .img__wrap { // display: flex; // position: absolute; width: 620px; margin: 0 auto; margin-bottom: 20px; height: 160px; } //.wrapper__works:hover { // animation-play-state: paused; //} @keyframes scroll { 0% { transform: translate3d(0, 0,0); } // 80% { // transform: translate3d(0, -2700px, 0); // transform: translate3d(0, -2500px, 0); // } // 95% { // transform: translate3d(0, -2700px, 0); // transform: translate3d(0, -3580px, 0); // } // 90% { // transform: translate3d(0, -2700px, 0); // transform: translate3d(0, -3000px, 0); // } 100% { // transform: translate3d(0, -2700px, 0); transform: translate3d(0, -3600px, 0); } } @keyframes stop { 0% { transform: translate3d(0,0,0); } 10% { transform: translate3d(0, -800px,0); } 20% { transform: translate3d(0, -1300px,0); } 30% { transform: translate3d(0, -1700px,0); } 40% { transform: translate3d(0, -2000px,0); } 50% { transform: translate3d(0, -2200px, 0); } 60% { transform: translate3d(0, -2300px,0); } 70% { transform: translate3d(0, -2400px,0); } 80% { transform: translate3d(0, -2390px, 0); } 90% { transform: translate3d(0, -2400px, 0); } 100% { transform: translate3d(0, -2390px, 0); } }