CODEWITHSUNDEEP
csscss-transitionscss-animations
whaley
whaley

Reputation: 645

CSS transitions have a delay when iterating through properties in webkit browsers

Webkit browsers seem to have a delay when iterating through animated properties, but Firefox doesn't. I prefer the way Firefox handles this but I can't get the same behavior in Chrome or Safari.

Firefox works:

Firefox Works

Chrome doesn't:

Chrome Doesn't

I'm using Autoprefixer, so I don't think it's vendor prefixes.

Here is a Codepen with Jade and SCSS.

This is the compiled HTML and CSS:

* {
  transition-property: all;
  transition-duration: 0.25s;
}
body {
  color: #000;
}
.blog-tile {
  background-color: #7f7f7f;
  transition: all 0.25s;
}
.blog-tile:hover {
  color: #FFF;
  background-color: #000;
}
<section class="blog">
  <div class="center">
    <div class="grid-blog-tile-list">
      <div class="col-blog-tile-list">
        <div class="blog-tile">
          <div class="root">
            <h1 class="blog-title"><a href="#">Heading 1</a></h1>
            <h2 class="blog-date">October 2, 2014</h2>
            <p>Words might happen here. Words might happen here. Words might happen here. Words might happen here. Words might happen here. Words might happen here.</p>
          </div>
        </div>
      </div>

      <!-- more html -->

    </div>
  </div>
</section>

How can I get this behavior with CSS?

Upvotes: 1

Views: 116

Answers (1)

misterManSam
misterManSam

Reputation: 24692

The problem is caused by applying the transition to the universal selector (*). Apply the transition to .blog-tile and there is no problem.

Use the transition property more selectively.

Note: The transition property is very well supported without prefixes. A lot of the prefixes added by Autoprefixer for transition are adding unnecessary bulk to your compiled CSS.

Working Example

Also with SCSS / Jade in Codepen

body {
  color: #000;
}
.blog-tile {
  background-color: #7f7f7f;
  transition: all 0.25s;
}
.blog-tile:hover {
  color: #FFF;
  background-color: #000;
}
<section class="blog">
  <div class="center">
    <div class="grid-blog-tile-list">
      <div class="col-blog-tile-list">
        <div class="blog-tile">
          <div class="root">
            <h1 class="blog-title"><a href="#">Heading 1</a></h1>
            <h2 class="blog-date">October 2, 2014</h2>
            <p>Words might happen here. Words might happen here. Words might happen here. Words might happen here. Words might happen here. Words might happen here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 2

Related Questions