How to make CSS color transition time correctly with transform perspective?


Tags: css,css3,css-transitions,css-transforms

Problem :

So I have this cute little spinner made to signify when something is loading. The perspective changes and the background color are supposed to change at the same time. I am having trouble getting the Transform and Transition timings to line up so that you don't see the color change, it needs to be already changed when the square flips so that it is a smooth transition.

Link to JS Fiddle

HTML

<div class="spinner"></div>

CSS

    .spinner {
    width: 20px;
    height: 20px;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}


Solution :

Two things to consider:

  1. Transitions interpolate smoothly (well, according to the easing function) between keyframes.
  2. If you do not specify an attribute at a keyframe, it will interpolate without interruption over that keyframe.

With those in mind, you can change the keyframes to apply your color change in the middle of your perspective change. In addition, you'll set two keyframes for the color change, very close to each other, to ensure the interpolation happens over a small time slice.

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  24.9% {background-color: #00b16a;}
  25.0% {background-color: #f22613;}
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
  74.9% { background-color: #f22613; }
  75% { background-color: #aaabae; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}

Now, you'll notice that since you have the animation on infinite repeat, that you still get a color transition when the animation loops from 100% to 0%. You'll have to either specify animation-direction: alternate; or adjust your keyframes so that 100% ends at a reasonable tweening point between 100% and 0%.

DEMO using alternate


    CSS Howto..

    How can I put an input element on the same line as its label?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to add space between CSS table rows?

    How to include a css stylesheet in Orchard module?

    How to Prevent Browsers from Caching CSS Files?

    How to make an item background visible on overflow?

    How set a page to maximum and minimum sizes via css

    How to make this CSS compatible with IE browsers? [closed]

    How to get the “declared” CSS value, not the computed CSS value

    CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

    How to avoid overlapping text using CSS?

    How to hide part of css when input is empty?

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    ExtJS how to remove grid row underline when selected and over

    How to use not css selector with * in stylesheet

    How to ignore CSS img styling for certain sections of the website?

    How to customize Twitter Bootstrap from Illustrator design

    how to put 2 css elements in the same row (one next to each other)?

    How to use pure css selector to select hidden element

    How to fill larger image into smaller div?

    CSS - how to align text and an image vertically?

    how to set css and html in textarea [closed]

    How to keep the HTML element aligned when clicked/focused?

    How to set the jquery draggable with margin left?

    How to figure out if CSS transition is about to happen?

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    How do I add background color to just the width of centred text?

    How to Style CSS Checkboxes with Font Awesome

    How to play a second CSS animation once the first one finishes

    How to vertically align image in a td cell, without vertically-align