Is there a way to enhance the clarity of the question's title?
I have an interesting effect where text starts off in grey color and then transitions to black using keyframes in CSS with the animate property.
I'm curious about how I can achieve a similar effect but with an image, transitioning from black and white to color from left to right.
Here is the code snippet:
<div class="modal">
<h1 id="testid" data-content="THIS IS A TEST">THIS IS A TEST</h1>
</div>
And here is the corresponding CSS:
@-webkit-keyframes loading{
from{max-width:0}
}
@-moz-keyframes loading{
from{max-width:0}
}
@-o-keyframes loading{
from{max-width:0}
}
@keyframes loading{
from{max-width:0}
}
.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}
.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}
.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}
You can view the code in action at this link: http://jsfiddle.net/5Vmnn/
Thank you for your help!