从右下角到左上角显示div

时间:2016-03-10 09:07:08

标签: css3 css-animations

是否可以使用CSS3动画从右下角到左上角使用调整大小效果显示隐藏的div?

希望这张照片会有所帮助:

enter image description here

1 个答案:

答案 0 :(得分:1)

动画宽度和高度 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/