CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Bethfiander
Bethfiander

Reputation: 177

CSS transition html page from black white to color with css?

Just wondering if its possible or not, but I am trying to make my page when loaded, transition from black and white to colour over maybe a 4 second period - the entire page, text, divs, images, everything.

I've made a black and white image that transitions to a coloured version with hover would it be similar to this? But with the wrapper?

img.desaturate { 
   animation: toColour 10s;
}

@keyframes toColour {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    50%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}

Or make each thing with colour individually transition?

Is there a better way or possible way with just css?

Thanks in advance

Upvotes: 0

Views: 2208

Answers (2)

jonju
jonju

Reputation: 2736

Well you never know unless you try. Check this out

.desaturate, .desaturate *  { 
   animation: toColour 7s;
}

@keyframes toColour {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    50%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
<div class="desaturate">
  <img src="http://images.freeimages.com/images/previews/476/green-fly-on-orange-flower-1366361.jpg" alt="" width="200" height="200"/>
</div>

Upvotes: 0

Ricky Ruiz
Ricky Ruiz

Reputation: 26781

I don't see why not, just use your animation in your wrapper:

jsFiddle

CODE SNIPPET:

@keyframes toColour {
  0% {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  25% {
    -webkit-filter: grayscale(75%);
    filter: grayscale(75%);
  }
  50% {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
  }
  50% {
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
  }
  100% {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
.wrapper {
  background-color: royalblue;
  animation: toColour 4s;
}
p {
  color: cyan;
}
<div class="wrapper">
  <p>
    Example text with color
  </p>
  <img src="http://fillmurray.com/500/500">
</div>

Upvotes: 1

Related Questions