Creating a sleek CSS animation for a slot machine effect: Ensuring it stops smoothly and at a specific time limit

I'm working on creating a CSS animation that mimics a slot machine, but I'm struggling to achieve a smooth transition.

.scrollable {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.items {
  -webkit-animation: scroll 5s infinite;
  -moz-animation: scroll 5s infinite;
  -ms-animation: scroll 5s infinite;
}

.number {
  color: #ffffff;
  font-size: 36px;
  padding-bottom: 28px;
  position: relative;
  top: 20px;
}

@-webkit-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}

@-moz-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}

@-ms-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}
<div class="scrollable">
  <div class="items">
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">1</div>
    <div class="number">2</div>
  </div>
</div>

How can I create a seamless loop effect instead of the current jarring jump back to the beginning? Also, is there a way to stop the loop after a specific duration, like 30 seconds?

csscss-animationskeyframe

Answer №1

If you're looking to create an endless loop with dynamic content changes, you can achieve it by utilizing the content modification along with the animation-iteration-count property to control the number of loops. I have experimented with this technique and managed to get it working successfully.

Take a look at the code snippet provided below:

.scrollable {
  height: 80px;
  width: 150px;
  margin: 0 auto;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.items{
  width: 0;
  word-break: break-all;
  word-wrap:break-word;
  white-space: pre-line;
}

.items::before {
  content:"1 2 3";
  color: #ffffff;
  font-size: 36px;
  -webkit-animation: scroll 5s infinite;
  -moz-animation: scroll 5s infinite;
  -ms-animation: scroll 5s infinite;
  -webkit-animation-iteration-count: 5;
}

@-webkit-keyframes scroll {
  0% {
  content:"1 2 3";
  }
  27.33% {
  content:"1 2 3";
  }
  33.33% {
  content:"2 3 1";
  }
  60.66% {
  content:"2 3 1";
  }
  66.66% {
  content:"3 1 2";
  }
  94.99% {
  content:"3 1 2";
  }
  100% {
  content:"1 2 3";
  }
}
<div class="scrollable">
  <div class="items">
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

htmljquerycssformsdate

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...

htmlcssoverflow

Position the personalized SVG button to align perfectly with the text underneath within a Bootstrap 5 Card structure

Is there a way to align custom buttons in a bootstrap card such that they are 3 wide and wrap to 2 wide on small screens? Additionally, I am struggling to center the text properly below the buttons. Any assistance would be greatly appreciated. Here is m ...

htmlcsssvgbootstrap-5

Guide to incorporating the content of a div into an image source using PHP

In extracting a value from an HTML table, I encountered this syntax: $('table#showalluporders tbody tr').click(function() { var tableData = $(this).closest("tr").children("td").map(function() { return $(this).text(); }).get(); $(' ...

phpjqueryhtmlcss

What is the best way to transmit the "theme" property to "Components" within a next.js application?

I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...

cssreactjsnext.jscomponentsreact-props

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Ways to move an element beyond specified padding using CSS

In this image below, I have added a 10px padding to the container as it is usually needed. However, for the headings (blue) I do not want any padding. Is there a way to make the heading extend over the padding? https://i.sstatic.net/DeSHZ.jpg I prefer no ...

htmlcss

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

javascriptcssvue.jsvuejs2

What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...

htmlcssbootstrap-4bootstrap-5

The body and HTML elements are bloated with an excessive amount of

Before we dive in, check out this code pen. CSS <body> <div class="header"> <img src="https://images.unsplash.com/photo-1586244439413-bc2288941dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cro ...

htmlcssgoogle-chromewebsass

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

javascripthtmlcss

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

The dropdown menu in the navigation bar is not properly lined up with its corresponding menu item

I've been struggling to align my submenu with the navbar, and I suspect there is an issue with the CSS that I can't seem to figure out. CodePEN: https://codepen.io/wowasdi/pen/xxKzdQq Even after trying to adjust the navbar CSS settings by changi ...

htmlcssnavbar

Tips for enhancing the color saturations of cells that overlap in an HTML table

My goal is to enhance the color of overlapping cells in my HTML tables. For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells. https://i.stack.imgur.com/mwv8x.png Next, clicking on cell 3 ...

javascriptjqueryhtmlcss

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Coming from a design background with zero programming knowledge, I have recently learned XHTML and CSS. Now, I am eager to expand my skills by mastering JavaScript, jQuery, and more. Where should I begin? This will be my first foray into programming. Whil ...

javascriptjquerycssxhtml

Tips for displaying all 'ul li' lists in media queries to ensure responsiveness in design

When I view my navigation bar snippet on desktop mode, it displays all the list items. However, when I adjust the browser width to fit my media queries, only the Home list is shown in the nav bar. Here's an example of the issue: Before Clicking the ...

jqueryhtmlcssmedia-queriesmedia

What steps can I take to ensure that my website is properly displayed and that my navbar appears beneath the logo on smaller screens? It is currently functioning well on desktops

Currently exploring web development for a new restaurant site, I've encountered an issue with the display on smaller screens. The page doesn't show full width and the navbar disappears entirely. How can I adjust the layout to ensure it looks good ...

htmlcssoptimizationnavbarresponsive

What is the best way to implement a slide-down animation on a stateless component in React JS using either ReactCSStransitionGroup or ReactTransition

I am looking to create an animation for a stateless component that starts off with display:none, and then becomes visible when the parent component's state changes. I want it to slide down like a dropdown menu effect. I am new to animations and have b ...

javascriptcssreactjscss-transitionsreact-transition-group

The CSS Image Gallery refuses to be centered

.imageContainer{ width: 100%; margin: 0 auto; position: relative; text-align: center; } .imageContainer img{ width: 250px; height: 250px; float: left; } .imageContainer img:hover{ opacity: 0.60; } I am having trouble gett ...

csscenter