Home > Web Front-end > CSS Tutorial > Why Don\'t CSS Transitions Work on Grid Template Properties in All Browsers?

Why Don\'t CSS Transitions Work on Grid Template Properties in All Browsers?

Patricia Arquette
Release: 2024-11-16 13:12:03
Original
783 people have browsed it

Why Don't CSS Transitions Work on Grid Template Properties in All Browsers?

Troubleshooting Transitions in CSS Grid Layout

CSS transitions can be applied to grid properties, allowing for smooth animations. However, certain conditions must be met for transitions to function correctly.

According to the CSS spec, transitions should work on grid-template-columns and grid-template-rows properties when only the values change, without altering the rule's structure. However, this is only supported in Firefox currently. Other browsers may implement it in future updates.

Test Case

Consider the following test case:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}
Copy after login
<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>
Copy after login

In this case, the transition will not work in browsers other than Firefox, despite being syntactically correct.

The above is the detailed content of Why Don\'t CSS Transitions Work on Grid Template Properties in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template