CODEWITHSUNDEEP
htmlcssanimationcss-animations
CUbuffsFTW
CUbuffsFTW

Reputation: 41

Combining CSS Animations. What next?

I am trying to make an animation of a stack of folders, where they will raise up, and then open to reveal the inside of the folder on hover (all but the bottom folder need to rise).

So far I have made the all top folders rise, and I've made the bottom folder open. Where I'm stuck is how to get the top folders to open after they rise. (side problem: getting both the front flap and the back of the folder to rise at the same time).

Here's a jsfiddle of what I have so far. Here to learn! Thanks

https://jsfiddle.net/m4ax81r6/

Edit: To add a little more clarification - the front and back of the folder need to rise together on hover of the front of the folder. Then the front of the folder needs to fold down, while all still risen. Last, the folder needs to fold back up and lower when the mouse stops hovering.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
        .folder {
            width: 500px;
            height: 250px;
            display: block;
            transition: transform .5s;
            transition-timing-function: ease-in-out;
            position: relative
        }
        #folder1 {
            z-index: 1;
        }
        #folder2 {
            margin-top: -100px;
            z-index: 2;
        }
        #folder3 {
            margin-top: -100px;
            z-index: 3;
            bottom: 250px;
        }
        .movefolder:hover {
            transform: translatey(-100px);
        }
        .front {
            top: -105px;
            width: 500px;
            height: 240px;
            display: block;
            transition: transform .5s;
            transition-timing-function: ease-in-out;
            position: relative;
            animation-delay: 2s;
            transform-origin: bottom;
            z-index: 4;
        }
        .openfolder:hover {
            transform: rotateX(-85deg);
        }
    </style>
</head>

<body style="margin-left:50px;  margin-top:100px; margin-bottom:50px;">

    <img id="folder1" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
    <img id="folder2" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
    <img class="front openfolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/front-folder-border-01.png" />
    <img id="folder3" class="folder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />

</body>

</html>

Upvotes: 0

Views: 94

Answers (1)

vals
vals

Reputation: 64164

Here is my try. I have added a base layer, and set different transition times on the base and hovered states.

It's important to make all hover changes on the same element, in this case the base element 

* {
  position: absolute;
  height: 250px;
  width: 500px;
  top: 0px;
  left: 0px;
}

#base1 {
  top: 200px;
}
#base2 {
  top: 400px;
}
.base {
  position: absolute;
  height: 250px;
  width: 500px;
  z-index: 1;
  transition: z-index 1s;
}

.base:hover {
  /*  z-index: 999;   probably not a good idea */   
}

.movefolder {
  transition: transform .5s .5s;
}
.base:hover .movefolder {
  transition: transform .5s;
  transform: translatey(-105px);
}


.folder {
  transition: transform .5s;
}
.openfolder {
  z-index: 2;
  transition: transform .5s;
  transition-timing-function: ease-in-out;
  transform-origin: center bottom;
}
.base:hover .openfolder {
  transform: rotateX(-85deg);
  transition: transform .5s .5s;
}
<div class="base" id="base1">
<div class="movefolder" style="width: 500px;">
  <img class="openfolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/front-folder-border-01.png" />
  <img class="folder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
</div>
</div>
<div class="base" id="base2">
<div class="movefolder" style="width: 500px;">
  <img class="openfolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/front-folder-border-01.png" />
  <img class="folder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
</div>
</div>

Upvotes: 1

Related Questions