CSS Animate image reveal
Solution 1
Do you want something like this? http://jsfiddle.net/e50mnm2p/3/
.reveal {
overflow:hidden;
position:relative;
display:inline-block;
}
.reveal:after {
content:" ";
position:absolute;
display:block;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
z-index:2;
transition: all 2s ease;
}
.reveal.show:after {
left:100%
}
Solution 2
You can use a pseudo-element to hide the actual element. To reveal the element, animate the pseudo-element's transform property (rotate it by 90deg).
The HTML :
<div id="parent">
<div id="child"></div>
</div>
The CSS :
#parent {
overflow: hidden;
}
#child {
position: relative;
background-color: yellow;
}
/* Pseudo-element that hides the child */
#child::after {
content: '';
position: absolute;
width: 150%;
height: 150%;
background-color: blue;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
}
#child.animated::after {
transform: rotate(90deg);
}
The Javascript :
$("#reveal-button").on('click', function() {
$("#child").toggleClass('animated');
});
There's the second way to reveal hidden element explained in my blog post : http://usefulangle.com/post/37/revealing-hidden-elements-by-css-animations
user1788364
Updated on June 13, 2022Comments
-
user1788364 almost 2 years
I have a graph that I would like to animate using CSS if possible. The way I see myself doing it would be to use a mask so it starts with nothing and then slowly the mask goes across gradually revealing the graph line.
This isn't the image I'm using but will be similar: http://jsfiddle.net/e50mnm2p/
So imagine it starts off with nothing and then from the left it will gradually reveal the green line giving the impression it's being drawn. Is there a way of doing this with masks or is there a better alternative?
<img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" />
UPDATE
This is what I ended up doing: http://jsfiddle.net/e50mnm2p/5/
HTML
<div class="hgInner"> <img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" /> </div>
CSS
.hgInner { position: relative; float: left; height: 100%; width: 955px; overflow: hidden; -webkit-animation: reveal 4s ease; -webkit-animation-fill-mode: backwards; } @-webkit-keyframes reveal { 0% {width: 0px;} 100% { width: 100%;} } @keyframes reveal { 0% {width: 0px;} 100% { width: 100%;} }