Paper Folding Animation using Pure CSS

Spread the love

In this tutorial, we are going to create a paper folding animation using pure CSS. Basically, such animations can be used for various purposes but using animation for a reason make your design more attractive. So, where we’ll apply this paper folding effect? well! as you have seen in the above preview image, there is a card showing folded image and three action buttons.

That’s the idea, we’ll create a card element, it can be a content card like the post, product, or service with thumbnails and description. When a user hovers over the card, the thumbnail/image folded up and action buttons reveal a smooth transition effect. You can experience this effect on the demo page.

Generally, you can use this paper folding animation where you want. Here you can get the basic idea as well as implement this animation on a card hover. So, without going into depth, let’s start with HTML to create the paper folding effect.

The HTML Structure

In HTML, create a div element with a class name "view". Place three span elements inside the view container with a class name "slice" and assign a unique id to each span tag. Likewise, create another span tag and assign a class name "shadow".You can also place some text or links after span elements that we’ll reveal along with the paper folding animation.

<div class="view">
   <span class="slice" id="one"></span>
   <span class="slice" id="two"></span>
   <span class="slice" id="three"></span>
   <span class="shadow"></span>
   <a href="#1" class="btn link"><i class="fa fa-link"></i></a>
   <a href="#2" class="btn upload"><i class="fa fa-download"></i></a>
   <a href="#3" class="btn share"><i class="fa fa-share-alt"></i></a>
</div>

You can place the above HTML anywhere on your page where you want to implement paper folding animation.

CSS Styles for Paper Folding Animation

The "view" container is the wrapper element for the paper/card. Define its width and height as 456px and 300px respectively. Likewise, define background color, box-shadow, and relative position as follows.

.view {
   position: relative;
   width: 456px;
   height: 300px;
   margin: 60px auto 0;
   border-radius: 30px;
   background-color: rgba(0,0,0,.1);
   box-shadow: inset 0 -2px 1px 0 rgba(255,255,255,.16), inset 0 0 0 2px rgba(0,0,0,.2);
   transform-style: preserve-3d;
   transform: perspective(1000px);
   cursor: pointer;
}

The "slice" is a special class for the span element that creates the paper folding effect on the hover. It contains three pieces with unique id #one, #two, and #three. Target these ids and define CSS styles as described below.

.slice {
   display: block;
   position: absolute;
   left: 0;
   width: 100%;
   height: 100px;
   box-sizing: border-box;
   border: 10px solid #e8e3da;
   background-image: url('img/bg-image.jpg');
   background-size: 100%;
   background-repeat: no-repeat;
   transition: filter .1s linear;
   z-index: 10;
   text-align: center;
   font-size: 30px;
   line-height: 100px;
}

#one {
   top: 0;
   border-bottom: none;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   background-position: 0 0;
}

#two {
   top: 100px;
   border-top: none;
   border-bottom: none;
   background-position: 0 -90px;
}

#three {
   top: 200px;
   border-top: none;
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
   background-position: 0 -190px;
}

After that, target the "shadow" class and define its absolute position. Define 100% width and keep the same height as you have defined for the "view" container. Similarly, specify a background color, border radius, opacity, and use a CSS blur filter to make a realistic folding effect.

.shadow {
   position: absolute;
   top: 5px;
   left: 0;
   width: 100%;
   height: 300px;
   background: black;
   border-radius: 30px;
   opacity: .5;
   filter: blur(5px);
}

In order to animate the box shadow, target the "shadow" class with view:hover pseudo-class. Here, we’ll decrease the height for shadow (half of the view container) and change the opacity from 0.5 to 1 to make it sharp on hover. Similarly, select the other three slices and apply animation as follows:

.view:hover .shadow {
   left: -3px;
   width: 462px;
   height: 150px;
   filter: blur(7px);
   opacity: 1;
}
.view:hover #one {
   transform-origin: 50% 0%;
   -webkit-animation-name: first;
           animation-name: first;
   -webkit-animation-duration: 200ms;
           animation-duration: 200ms;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
   -webkit-animation-play-state: play;
           animation-play-state: play;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
   filter: brightness(104%);
}
.view:hover #two {
   transform-origin: 50% 100%;
   -webkit-animation-name: second;
           animation-name: second;
   -webkit-animation-duration: 200ms;
           animation-duration: 200ms;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
   -webkit-animation-play-state: play;
           animation-play-state: play;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
   filter: brightness(60%);
}
.view:hover #three {
   transform-origin: 50% 0%;
   -webkit-animation-name: third;
           animation-name: third;
   -webkit-animation-duration: 200ms;
           animation-duration: 200ms;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
   -webkit-animation-play-state: play;
           animation-play-state: play;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
   filter: brightness(104%);
}

Define CSS animation keyframes for the first, second, and third slice/folding effect as described below.

@-webkit-keyframes first {
   0% {
      transform: none;
   }
   95% {
      transform: rotateX(60deg);
   }
   100% {
      transform: rotateX(60deg);
   }
}

@keyframes first {
   0% {
      transform: none;
   }
   95% {
      transform: rotateX(60deg);
   }
   100% {
      transform: rotateX(60deg);
   }
}

@-webkit-keyframes second {
   0% {
      top: 100px;
      transform: none;
   }
   95% {
      top: 18px;
      transform: rotateX(-45deg);
   }
   100% {
      top: 1px;
      transform: rotateX(-59deg);
   }
}

@keyframes second {
   0% {
      top: 100px;
      transform: none;
   }
   95% {
      top: 18px;
      transform: rotateX(-45deg);
   }
   100% {
      top: 1px;
      transform: rotateX(-59deg);
   }
}

@-webkit-keyframes third {
   0% {
      top: 200px;
      transform: none;
   }
   95% {
      top: 121px;
      transform: rotateX(60deg);
   }
   100% {
      top: 99px;
      transform: rotateX(60deg);
   }
}

@keyframes third {
   0% {
      top: 200px;
      transform: none;
   }
   95% {
      top: 121px;
      transform: rotateX(60deg);
   }
   100% {
      top: 99px;
      transform: rotateX(60deg);
   }
}

CSS Styles for Paper Card Actions

The basic paper folding animation has been created. Now, we need to design something that should show behind the paper. Generally, you can place anything, like description or action buttons according to your needs. We have placed some action buttons as shown in the preview image. If you want to have the same design, then you can define the following CSS styles for the buttons.

.btn {
   position: absolute;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #ccd1d5;
   box-shadow: 1px 3px 2px 0 rgba(0,0,0,.5), inset 1px 3px 3px 0 rgba(255,255,255,.6);
   text-align: center;
   font-size: 30px;
   line-height: 64px;
   color: #3d4245;
   z-index: 1;
}

Select the link, upload, share button class, and define the CSS styles as defined below. If you want to customize these buttons, you can check these CSS cool buttons in different sizes.

.link {
   top: 210px;
   left: 30px;
   background: radial-gradient(ellipse 140% 60% at 90% 80%, rgba(160,166,172,.4) 0%, rgba(160,166,172,.4) 70%, transparent 70%, transparent 100%), #ccd1d5;
}
.upload {
   top: 210px;
   left: 110px;
   background: radial-gradient(ellipse 140% 60% at 90% 80%, rgba(160,166,172,.4) 0%, rgba(160,166,172,.4) 70%, transparent 70%, transparent 100%), #ccd1d5;
}
.share {
   top: 210px;
   right: 25px;
   background: radial-gradient(ellipse 140% 60% at 90% 80%, rgba(176,73,72,.4) 0%, rgba(176,73,72,.4) 70%, transparent 70%, transparent 100%), #cc7371;
}

Apply a different background color on the hover event. You can also apply the shining/glow hover effect if you want to make the action button more attractive.

.link:hover,
.upload:hover {
   background: #ccd1d5;
}
.share:hover {
   background: #cc7371;
}

That’s all! hopefully, you have successfully implemented this pure CSS paper folding animation. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment