一个元素不设置高度时，height的默认值是 auto，浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 css3动画呢？在MDN文档中CSS 支持动画的属性中的 height 属性如下 ：当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡，所以当元素 height : auto 时，默认是不支持 CSS3 动画的。
为了解决这个问题，我们可以通过JS 获取精确的 height 值，或者使用max-height 代替 height。只需要设置一个肯定比元素自增长大的高度值，由于是根据 max-height 值进行过渡效果，所以最好不要大得离谱，否则动画效果不理想。下面就介绍这2种方式的实现：
1、利用max-height:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding:0;
}
div{
display: inline-block;
overflow: hidden;
background-color: orange;
max-height: 20px;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
div:hover{
max-height:200px;
}
</style>
</head>
<body>
<div>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
</div>
</body>
</html>2、通过js获取高度
css:
.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(loading.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto; border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }
html:
<div id="box">...</div>
<p>
<input type="button" id="button" value="点击我">
</p>js:
// 高度无缝动画方法
var funTransitionHeight = function(element, time) { // time, 数值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
var height = window.getComputedStyle(element).height;
element.style.transition = "none"; // 本行2015-05-20新增，mac Safari下，貌似auto也会触发transition, 故要none下~
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
};该dom来源：不定高度动态元素height CSS3 transition过渡动画实例页面
如何写出高性能的CSS3动画
小伙伴们在写CSS3动画时，会发现在手机上很多时候会感到卡顿，然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢?
css3动画讲解，关于css3的@keyframes和animation
通过css3我们可以创建动画，它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的，通过样式来实现的。
css3动画transition的使用和介绍
CSS3中可以使用transition来做最简单动画效果，transition表示到一个元素的属性值发生变化时，我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程，这种效果不是立即变化的，而是体现出一种动画过程。
CSS3动画 相比JS Animation 哪个更快?
基于JavaScript的动画竟然已经默默地比CSS的transition动画快了？而且，Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点？这篇文章将会逐点讲解基于JavaScript的DOM动画库，比如Velocity.js和GSAP，是如何比jQuery和基于CSS的动画库高效的。
css制作简单loading动画效果【css3 loading加载动画】
loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。CSS的animation可以做出大多数的loading
css3动画的性能优化_针对移动端卡顿问题
主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项，包括：用canvas、css3、jquery制作动画；css3在移动端卡顿问题；动画过程有闪烁问题（一般出现在动画开始）
CSS3动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。transform：描述了元素的静态样式，本身不会呈现动画效果,transition样式过渡，从一种效果逐渐改变为另一种效果，animation动画 由@keyframes来描述每一帧的样式
css3动画，监控动画执行完毕
CSS3之前，在网页上要做动画，一般使用javascript来实现，用timer定时执行一些操作来实现动画效果。自有了CSS3之后，在网页上做动画变得更简单了。相对于使用javascript的实现方式，用CSS3实现的动画效果更流畅，实现起来也更简单。
值得你收藏的10个CSS3动画工具
在CSS3中引入了全新的动画语法，它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的，而使用动画库和生成器则可以帮助你完美处理这一切
CSS3动画总结
常用特效/变换（transform）scale（2D缩放） rotate（2D旋转） translate（2D位移）skew（2D倾斜）;keyframes这个属性用来定义一系列关键帧
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!