{"id":3368,"date":"2022-09-14T07:25:52","date_gmt":"2022-09-14T07:25:52","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3368"},"modified":"2023-06-10T11:34:52","modified_gmt":"2023-06-10T11:34:52","slug":"css-tutorial-the-handbook-download-animation","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-the-handbook-download-animation\/","title":{"rendered":"CSS Tutorial &#8211; The Handbook Download Animation"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; CSS animations open up a whole new way to look at and use CSS to bring motion to the web in creative ways. This Pocket Guide is designed to help you jump into using CSS @keyframe animations in your own projects, providing a strong foundation on which to start experimenting and creating.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - The Handbook Download Animation\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/OJZJaVj?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/OJZJaVj\"><br \/>\nCSS Tutorial &#8211; The Handbook Download Animation<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body,\r\nol,\r\nul,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nth,\r\ntd,\r\ndl,\r\ndd,\r\nform,\r\nfieldset,\r\nlegend,\r\ninput,\r\ntextarea,\r\ni,\r\nselect {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nbody {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-pack: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-box-align: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n    background-color: #2C3138;\r\n    -webkit-perspective: 90rem;\r\n            perspective: 90rem;\r\n    -webkit-perspective-origin: 34% 61%;\r\n            perspective-origin: 34% 61%;\r\n            \r\n}\r\n\r\nimg {\r\n    width: 160px;\r\n}\r\n\r\nbutton {\r\n    cursor: pointer;\r\n    outline: 0;\r\n    width: 180px;\r\n    height: 48px;\r\n    border-radius: 8px;\r\n    background-color: #2C3138;\r\n    margin-top: 40px;\r\n    overflow: hidden;\r\n    -webkit-transform: scale(.7);\r\n            transform: scale(.7);\r\n}\r\n\r\nbutton::after {\r\n    content: \"\";\r\n    position: relative;\r\n    top: -40px;\r\n    display: block;\r\n    width: 48px;\r\n    height: 107%;\r\n    background-color: #000;\r\n    margin-top: -1px;\r\n    margin-left: -7px;\r\n    border-radius: 6px 0 0 6px;\r\n    background-image: url('data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTQgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjEgKDU3NTAxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhELUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwOS4wMDAwMDAsIC0xMDA4LjAwMDAwMCkiIGZpbGw9IiNGOUZDRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ3LjAwMDAwMCwgNDk5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuMDAwMDAwLCA0OTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2ZpbGVfZG93bmxvYWRfYmxhY2tfMjRweC0oMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDEyIEwxMCwxMiBMMTAsNiBMNCw2IEw0LDEyIEwwLDEyIEw3LDE5IEwxNCwxMiBaIE0wLDIxIEwwLDIzIEwxNCwyMyBMMTQsMjEgTDAsMjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}\r\n\r\nbutton::before {\r\n    content: \"\";\r\n    display: block;\r\n    width: 48px;\r\n    height: 46px;\r\n    margin-left: -7px;\r\n    margin-top: -1px;\r\n    -webkit-transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);\r\n    transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);\r\n}\r\n\r\n.box-1:hover button::before {\r\n    width: 120%;\r\n    opacity: .8;\r\n    background-color: #00BF9C;\r\n}\r\n\r\n.box-2:hover button::before {\r\n    width: 120%;\r\n    opacity: .8;\r\n    background-color: #653EE6;\r\n}\r\n\r\n.box-3:hover button::before {\r\n    width: 120%;\r\n    opacity: .8;\r\n    background-color: #008BFF;\r\n}\r\n\r\n.box-4:hover button::before {\r\n    width: 120%;\r\n    opacity: .8;\r\n    background-color: #FF6500;\r\n}\r\n\r\n.container {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n    -ms-flex-pack: distribute;\r\n        justify-content: space-around;\r\n    -ms-flex-wrap: wrap;\r\n        flex-wrap: wrap;\r\n    width: 80vw;\r\n    height: 100vh;\r\n    margin-left: 6vw;\r\n    \/* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); *\/\r\n    -webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);\r\n            transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);\r\n}\r\n\r\n.box {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n        -ms-flex-direction: column;\r\n            flex-direction: column;\r\n    -webkit-transition: all .3s ease-out;\r\n    transition: all .3s ease-out;\r\n    will-change: transform;\r\n}\r\n\r\n.box:hover .cover {\r\n    -webkit-transform: translateY(-14px) scale(1.04);\r\n            transform: translateY(-14px) scale(1.04);\r\n}\r\n\r\n.box-1 button {\r\n    border: 1px solid #00BF9C;\r\n    color: #fff;\r\n    font-size: 22px;\r\n    text-align: right;\r\n    padding-right: 20px;\r\n    line-height: 40px;\r\n}\r\n\r\n.box-1 button::after {\r\n    content: \"\";\r\n    background-color: #00BF9C;\r\n    top: -85px\r\n}\r\n\r\n.box-2 button {\r\n    border: 1px solid #653EE6;\r\n    color: #fff;\r\n    font-size: 22px;\r\n    text-align: right;\r\n    padding-right: 20px;\r\n    line-height: 40px;\r\n}\r\n\r\n.box-2 button::after {\r\n    content: \"\";\r\n    background-color: #653EE6;\r\n    top: -85px\r\n}\r\n\r\n.box-3 button {\r\n    border: 1px solid #008BFF;\r\n    color: #fff;\r\n    font-size: 22px;\r\n    text-align: right;\r\n    padding-right: 20px;\r\n    line-height: 40px;\r\n}\r\n\r\n.box-3 button::after {\r\n    content: \"\";\r\n    background-color: #008BFF;\r\n    top: -85px\r\n}\r\n\r\n.box-4 button {\r\n    border: 1px solid #FF6500;\r\n    color: #fff;\r\n    font-size: 22px;\r\n    text-align: right;\r\n    padding-right: 20px;\r\n    line-height: 40px;\r\n}\r\n\r\n.box-4 button::after {\r\n    content: \"\";\r\n    background-color: #FF6500;\r\n    top: -85px\r\n}\r\n\r\n.cover {\r\n    -webkit-transition: all 400ms ease-in-out;\r\n    transition: all 400ms ease-in-out;\r\n    will-change: transform;\r\n}\r\n\r\n.cover img {\r\n    -webkit-transition: all 260ms ease-in-out;\r\n    transition: all 260ms ease-in-out;\r\n}\r\n\r\n.box .cover::after {\r\n    content: \"\";\r\n    z-index: -99;\r\n    position: absolute;\r\n    top: 20px;\r\n    left: -20px;\r\n    display: block;\r\n    width: 160px;\r\n    height: 214px;\r\n    opacity: 0;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    background-size: 160px 214px;\r\n    -webkit-filter: blur(24px);\r\n            filter: blur(24px);\r\n    -webkit-transition: all 260ms ease-in-out;\r\n    transition: all 260ms ease-in-out;\r\n    will-change: transform;\r\n    -webkit-transform: scale(.6);\r\n            transform: scale(.6);\r\n}\r\n\r\n.box:hover .cover::after {\r\n    opacity: 1;\r\n    -webkit-transform: scale(1);\r\n            transform: scale(1);\r\n}\r\n\r\n.box-1 .cover::after {\r\n    background-image: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/945546\/3433202-893bc9989a52eba0.png');\r\n}\r\n\r\n.box-2 .cover::after {\r\n    background-image: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/945546\/3433202-964edcf0f07211b0.png');\r\n}\r\n\r\n.box-3 .cover::after {\r\n    background-image: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/945546\/3433202-2ebb2b6f93add843.png');\r\n}\r\n\r\n.box-4 .cover::after {\r\n    background-image: url('https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/945546\/3433202-f79c4cc8de2f84ae.png');\r\n}\r\n\r\n.box-1 button div::before {\r\n    content: 'Sensebot';\r\n    position: relative;\r\n    top: -44px;\r\n    left: -4px;\r\n    color: #00BF9C;\r\n    font-size: 21px;\r\n    font-weight: 300;\r\n}\r\n\r\n.box-1:hover button div::before {\r\n    color: #fff;\r\n}\r\n\r\n.box-2 button div::before {\r\n    content: 'OnePass';\r\n    position: relative;\r\n    top: -44px;\r\n    left: -6px;\r\n    color: rgb(154, 123, 255);\r\n    font-size: 21px;\r\n    font-weight: 300;\r\n}\r\n\r\n.box-2:hover button div::before {\r\n    color: #fff;\r\n}\r\n\r\n.box-3 button div::before {\r\n    content: 'DeepKnow';\r\n    position: relative;\r\n    top: -44px;\r\n    left: 3px;\r\n    color: #008BFF;\r\n    font-size: 21px;\r\n    font-weight: 300;\r\n}\r\n\r\n.box-3:hover button div::before {\r\n    color: #fff;\r\n}\r\n\r\n.box-4 button div::before {\r\n    content: 'Scanner';\r\n    position: relative;\r\n    top: -44px;\r\n    left: -9px;\r\n    color: #FF6500;\r\n    font-size: 21px;\r\n    font-weight: 300;\r\n}\r\n\r\n.box-4:hover button div::before {\r\n    color: #fff;\r\n}\r\n\r\n.dr {\r\nposition: absolute;\r\n  bottom: 16px; \r\n  right: 16px;\r\n  width:100px;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; CSS animations open up a whole new way to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-the-handbook-download-animation\/\" title=\"CSS Tutorial &#8211; The Handbook Download Animation\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,197,320,315,103,227],"newstopic":[],"class_list":{"0":"post-3368","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-handbook-download-animation","12":"tag-keyframes-animation","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3368"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3368\/revisions"}],"predecessor-version":[{"id":3383,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3368\/revisions\/3383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3736"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3368"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}