Gyancode

A free library of HTML, CSS, JS

Search This Blog

Wednesday 8 March 2017

Animate "height" with CSS Transitions

<!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>

No comments :

Post a Comment