相关疑难解决方法(0)

我想在CSS3中模拟弹性缓动函数.CSS3本身并不支持这个,所以我一直想出自己的关键帧,它看起来还不错,但不是很自然.

我不想要一个需要任何其他JavaScript脚本的解决方案.StackOverflow上的所有其他帖子都接受了JS解决方案.

在纯CSS3中实现弹性缓动的最佳方法是什么？

到目前为止,这是我的工作,如果这有助于任何人......

https://jsfiddle.net/407rhhnL/1/

我正在制作红色,绿色和蓝色等长矩形棱镜的动画.我通过硬编码以下CSS3关键帧手动模拟弹性缓动:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

我不是在寻找有关调整此代码的建议,我想知道是否有比硬编码更好的解决方案.

我使用height属性来动画我的DIV,它出现在另一个元素的悬停上 - 它从顶部"滚动".有没有办法旋转动画,所以我会让它从下到上显示？

HTML:

<a href="#" class="show">SHOW IT</a>

<div id="appear">
    <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

CSS:

#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
    height: 331px;
}

的jsfiddle