Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

akash devgan
akash devgan
2,312 Points
Posted by akash devgan
akash devgan
2,312 Points

Am trying to create animation effect on height of paragraph using css but its not working the way it is supposed to be??

on hovering of link height of p should increase

html: <!doctype html> <html> <head> <link rel="stylesheet" href="main.css"> </head>

<body> <div class="wrap"> <a href="#">toggle</a> <p>For animate the "height" of element with CSS Transitions you need use "max-height".

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> </body> </html>

css:

html,body{width:100%; height:100%; margin:0; padding:0}

.wrap{ width:70%; margin:300px auto; background:tomato; }

p{ max-height:0px; overflow:hidden; transition:1s; }

a:hover p{ height:400px; }

2 Answers

Lee Geertsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Lee Geertsen
Java Web Development Techdegree Student 16,749 Points
Lee Geertsen
.a{fill-rule:evenodd;}techdegree
Lee Geertsen
Java Web Development Techdegree Student 16,749 Points

To use animate in css you first have to configure keyframes, then afterwards you can add the animation. The following code should normally do the work.

/* The keyframe used for the animation, don't forget the -webkit-, .... for support on all browsers */
@-webkit-keyframes slide {
  0%   { max-height:   0%; }
  100% { max-height: 100%; }
}
@-moz-keyframes slide {
  0%   { max-height:   0%; }
  100% { max-height: 100%; }
}
@-o-keyframes slide {
  0%   { max-height:   0%; }
  100% { max-height: 100%; }
}
@keyframes slide {
  0%   { max-height:   0%; }
  100% { max-height: 100%; }
}

/* The keyframe used for the animation, don't forget the -webkit-, .... for support on all browsers */
p {
  overflow:hidden;
  /* animation: 'name of animation' 'duration' 'progress' 'delay' */
 -webkit-animation: slide 2s ease 3s;
  -moz-animation: slide 2s ease 3s;
  -o-animation: slide 2s ease 3s;
  animation: slide 2s ease 3s;
}
akash devgan
akash devgan
2,312 Points
akash devgan
akash devgan
2,312 Points

no am trying to use transition for the effect