<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate "height" with CSS Transitions </title>
</head>
<style type="text/css">
body{font-family: verdana; font-size: 14px; text-align: center;}
.accordion {display: inline-block;text-align: left; margin: 1%; width: 70%;}
.accordion:hover .accordion-content { max-height: 300px;}
.accordion-content { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s; background: #ffb1b1; overflow: hidden; max-height: 0;}
.accordion-inner { padding: 0 15px;}
.accordion-toggle { -webkit-transition: background .1s linear; -moz-transition: background .1s linear; -ms-transition: background .1s linear; -o-transition: background .1s linear; transition: background .1s linear; background:#de0000;
border-radius: 3px; color: #fff; display: block; font-size: 24px; margin: 0 0 10px; padding: 10px; text-align: center;
text-decoration: none;}
.accordion-toggle:hover { background:#a20000;}
</style>
<body>
<div class="accordion">
<a href="#" class="accordion-toggle">Hover for height animate</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Animate "height" with CSS Transitions </title>
</head>
<style type="text/css">
body{font-family: verdana; font-size: 14px; text-align: center;}
.accordion {display: inline-block;text-align: left; margin: 1%; width: 70%;}
.accordion:hover .accordion-content { max-height: 300px;}
.accordion-content { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s; background: #ffb1b1; overflow: hidden; max-height: 0;}
.accordion-inner { padding: 0 15px;}
.accordion-toggle { -webkit-transition: background .1s linear; -moz-transition: background .1s linear; -ms-transition: background .1s linear; -o-transition: background .1s linear; transition: background .1s linear; background:#de0000;
border-radius: 3px; color: #fff; display: block; font-size: 24px; margin: 0 0 10px; padding: 10px; text-align: center;
text-decoration: none;}
.accordion-toggle:hover { background:#a20000;}
</style>
<body>
<div class="accordion">
<a href="#" class="accordion-toggle">Hover for height animate</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</body>
</html>
No comments :
Post a Comment