CODEWITHSUNDEEP
csscss-animations
RubyCat
RubyCat

Reputation: 165

Show div from bottom right to top left

Is it even possible to show a hidden div using resize effect with CSS3 animation from bottom right to top left?

Hopefully this picture will help:

enter image description here

Upvotes: 0

Views: 2283

Answers (1)

Zeeshan Anjum
Zeeshan Anjum

Reputation: 974

animate width and hight html

<div class="outer">
<div class="inner"></div>
</div>

css

.outer {
  width:200px;
  height:200px;
  position:relative;
}
.inner {
  width:0;
  height:0;
  position:absolute;
  bottom:0;
  right:0;
  background:red;
  -webkit-animation: resize 5s infinite; /* Chrome, Safari, Opera */
    animation: resize 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes resize {
    from {width: 0px;height:0px}
    to {width: 200px;height:200px}
}

@keyframes resize {
    from {width: 0px;height:0px}
    to {width: 200px;height:200px}
}

https://jsfiddle.net/larrypaul93/vrt0gcu3/

Upvotes: 1

Related Questions