1. Technology

Starting CSS Animations Mid-Way

Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don’t want all the elements to start at the same exact position.

You can change the animation-delay so that they start at different times, but they will still all start at the same place.

Fortunately, there is a way.

The trick is to use negative animation-delay. That will begin an animation right away, but as if part of the animation has run already.

For instance, here’s three elements:

<div class="thing thing-1"></div>
<div class="thing thing-2"></div>
<div class="thing thing-3"></div>

They are 300px wide. We’re going to animate them all the way across the screen:

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 100%;
  }
}

They all use this animation, meaning they would all start at the same place:

.thing {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveAcross 10s linear infinite;
}

To change them to start at different place along the keyframe timeline, we apply those negative delays:

.thing-1 {
  animation-delay: -1s;
}
.thing-2 {
  animation-delay: -2s;
}
.thing-3 {
  animation-delay: -3s;
}

Another little trick: to test those starting positions, just stop the animation (you’ll essentially just be seeing the first frame):

.car {
  ...
  animation-play-state: paused;
}

Paused

Running

This probably comes in most useful with really slow animations where a straight delay would result in nothing or the wrong thing being shown too long.

For fun, different durations as well:

See the Pen hjbKp by Chris Coyier (@chriscoyier) on CodePen.


Starting CSS Animations Mid-Way is a post from CSS-Tricks

No Comments
Comments to: Starting CSS Animations Mid-Way

Recent Articles

Good Reads

In the dynamic world of financial management, a hiccup in network connectivity can be a major roadblock. steps in as a reliable troubleshooter, addressing the top 5 network and connectivity issues that users commonly face. Slow Network Speeds: When financial operations grind to a halt due to sluggish network speeds, the Network Issues tab in […]
Heart attacks, also known as myocardial infarctions, are potentially life-threatening episodes that need immediate and appropriate treatment. Medical research has made great advances in creating new approaches for treating heart attacks throughout the years. This article will explore the latest advancements in heart attack treatment, encompassing both established and emerging strategies. Emergency medical response It […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
In the dynamic world of financial management, a hiccup in network connectivity can be a major roadblock. steps in as a reliable troubleshooter, addressing the top 5 network and connectivity issues that users commonly face. Slow Network Speeds: When financial operations grind to a halt due to sluggish network speeds, the Network Issues tab in […]
Heart attacks, also known as myocardial infarctions, are potentially life-threatening episodes that need immediate and appropriate treatment. Medical research has made great advances in creating new approaches for treating heart attacks throughout the years. This article will explore the latest advancements in heart attack treatment, encompassing both established and emerging strategies. Emergency medical response It […]
Trustworthy distributors of gemstones possess a committed and well-established manufacturing plant. The majority of the raw stone is converted into jewels that may be bought at this plant using cutting procedures. You can place a test order to observe the cutting process.   VISIT NOW- Brand Jewelry Wholesale fashion mayacruz1708@gmail.com Member since August 22, 2023 […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]