Ask A Question


You’re not receiving notifications from this thread.

Trying to relearn CSS and I'm stuck

KaistonGage asked in CSS

I'm trying to figure out how to do a simple animation. I have a box with some text content, the idea is that the box only shows an h2 element until the user mouses over it, then it reveals the paragraph element. I got the text to hide and reveal properly, and the box expands like I want it to but there is no animation, the box just pops out. The animation works fine if I set the hight and width properties to a solid pixel amount, but using auto breaks the animation. Sorry if I'm explaining this poorly, I'm trying to relearn CSS after years of being out of practice. Any way to fix this?
.info-box {
width: 360px;
height: 100px;
background-color: white;
padding-left: 15px;
padding-top: 1px;
margin: 10px;
overflow: hidden;
box-shadow: 0 7px 15px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
.info-box:hover {
animation-name: expand;
animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

        @keyframes expand {
            0% {
                width: 360px;
                height: 100px;
            100% {
                height: auto;
                width: auto;
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 80,973+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.