{"id":3294,"date":"2020-10-29T16:04:24","date_gmt":"2020-10-29T16:04:24","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3294"},"modified":"2023-03-02T09:43:30","modified_gmt":"2023-03-02T09:43:30","slug":"css-tutorial-product-page-with-css-keyframes-animation","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-product-page-with-css-keyframes-animation\/","title":{"rendered":"CSS Tutorial &#8211; Product Page with CSS Keyframes 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; <strong>CSS animations<\/strong>\u00a0make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation&#8217;s style, as well as possible intermediate waypoints.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/gOeVONV?default-tab=result&amp;theme-id=dark\" height=\"650\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/gOeVONV\"><br \/>\nUntitled<\/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=\"html\">    &lt;div class=\"container\"&gt;\r\n        &lt;div class=\"box\"&gt;\r\n            &lt;div class=\"product__img\"&gt;\r\n                &lt;img src=\"https:\/\/i.ibb.co\/xSK7fcJ\/oculus.png\" alt=\"\"&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"product__video\"&gt;\r\n                &lt;div class=\"video\"&gt;\r\n                    &lt;i class=\"fas fa-play\"&gt;&lt;\/i&gt;\r\n                    &lt;p&gt;watch a review&lt;\/p&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"product__disc\"&gt;\r\n                &lt;div class=\"product__disc--content\"&gt;\r\n                    &lt;div class=\"disc__content--about\"&gt;\r\n                        &lt;h1&gt;Oculus Rift S&lt;\/h1&gt;\r\n                        &lt;span&gt;get ready to step into a new world&lt;\/span&gt;\r\n                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur hic minus nihil\r\n                            obcaecati, ratione repellendus saepe sint tenetur totam ullam. Accusantium aspernatur\r\n                            ducimus impedit perferendis quisquam repellendus similique ullam vitae!&lt;\/p&gt;\r\n                    &lt;\/div&gt;\r\n\r\n                    &lt;div class=\"product__view--more\"&gt;\r\n                        &lt;p&gt;view all specifications&lt;\/p&gt;\r\n                        &lt;div class=\"view__more--block\"&gt;&lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"product_buttons\"&gt;\r\n                &lt;button class=\"btn wishlist\"&gt;wishlist&lt;\/button&gt;\r\n                &lt;button class=\"btn buy\"&gt;buy&lt;\/button&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;!-- ignore --&gt;\r\n&lt;a href=\"https:\/\/youtu.be\/NBIbZIegMRY\" target=\"_blank\"&gt;&lt;footer&gt;\r\n    &lt;div class=\"texto\"&gt;\r\n        &lt;span&gt;\r\n            &lt;i class=\"fab fa-youtube\"&gt;&lt;\/i&gt;\r\n             watch on youtube&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/footer&gt;\r\n   &lt;\/a&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">@import url('https:\/\/fonts.googleapis.com\/css?family=Lato:300,400|Poppins:300,400,800&amp;display=swap');\r\n\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbody {\r\n  font-family: 'Poppins';\r\n}\r\n\r\n.container {\r\n  width: 100%;\r\n  height: 100vh;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: #f6f6f6;\r\n  position: relative;\r\n\r\n  .box {\r\n    width: 0%;\r\n    height: 620px;\r\n    background: #FFF;\r\n    position: absolute;\r\n    animation: openBox 1s cubic-bezier(.74, .06, .4, .92) forwards;\r\n\r\n    .product__img {\r\n      width: 600px;\r\n      position: absolute;\r\n      left: -150px;\r\n      top: 50px;\r\n      opacity: 0;\r\n      animation: fadeImg 1s ease-in-out forwards;\r\n      animation-delay: 1s;\r\n    }\r\n\r\n    .product__video {\r\n      width: 320px;\r\n      height: 100px;\r\n      position: absolute;\r\n      left: 50px;\r\n      bottom: 50px;\r\n\r\n      .video {\r\n        display: flex;\r\n        align-items: center;\r\n        position: absolute;\r\n        bottom: 0px;\r\n        opacity: 0;\r\n        animation: upVideo 1s cubic-bezier(.74, .06, .4, .92) forwards;\r\n        animation-delay: 1.2s;\r\n\r\n\r\n        i {\r\n          width: 70px;\r\n          height: 70px;\r\n          display: flex;\r\n          justify-content: center;\r\n          align-items: center;\r\n          font-size: 12px;\r\n          color: #F71568;\r\n          border: 2px solid #F71568;\r\n          -webkit-border-radius: 50%;\r\n          -moz-border-radius: 50%;\r\n          border-radius: 50%;\r\n          transition: ease-in-out 220ms;\r\n          cursor: pointer;\r\n\r\n          &amp;:hover {\r\n            background: #F71568;\r\n            color: #fff;\r\n            box-shadow: 0 0 26px #F71568;\r\n          }\r\n        }\r\n        p {\r\n          margin-left: 25px;\r\n             font-family: 'Poppins';\r\n\r\n        }\r\n      }\r\n    }\r\n\r\n    .product__disc {\r\n      width: 0px;\r\n      height: 430px;\r\n      background: #FFCA1B;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: absolute;\r\n      left: 0px;\r\n      top: 50px;\r\n      animation: showDisc 1s cubic-bezier(.74, .06, .4, .92) forwards;\r\n\r\n      .product__disc--content {\r\n        width: 80%;\r\n        height: 80%;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        flex-direction: column;\r\n        animation: fadeContent 1s ease-in-out forwards;\r\n        animation-delay: 1s;\r\n        opacity: 0;\r\n\r\n        .disc__content--about {\r\n          width: 100%;\r\n\r\n          h1 {\r\n            font-size: 32px;\r\n               font-family: 'Poppins';\r\n\r\n          }\r\n          span {\r\n            font-family: 'Lato';\r\n            font-size: 14px;\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n            display: flex;\r\n            opacity: 0.5;\r\n          }\r\n          p {\r\n            margin-top: 35px;\r\n            font-size: 14px;\r\n               font-family: 'Poppins';\r\n\r\n          }\r\n        }\r\n\r\n        .product__view--more {\r\n          width: 100%;\r\n          display: flex;\r\n          align-items: center;\r\n          position: relative;\r\n          cursor: pointer;\r\n\r\n          &amp;:hover {\r\n            .view__more--block {\r\n              width: 220px;\r\n              height: 35px;\r\n            }\r\n          }\r\n\r\n          .view__more--block {\r\n            width: 10px;\r\n            height: 15px;\r\n            position: absolute;\r\n            background: #f6f6f6;\r\n            z-index: 1;\r\n            transition: cubic-bezier(0.68, -0.55, .27, 01.55) 320ms;\r\n          }\r\n          p {\r\n            font-size: 12px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            display: flex;\r\n            z-index: 2;\r\n            margin-left: 15px;\r\n               font-family: 'Poppins';\r\n\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .product_buttons {\r\n      width: 500px;\r\n      height: 100px;\r\n      bottom: 50px;\r\n      right: -50px;\r\n      position: absolute;\r\n\r\n      .btn {\r\n        width: 240px;\r\n        height: 70%;\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n        font-family: 'Poppins';\r\n        -webkit-transition: ease-in-out 220ms;\r\n        -moz-transition: ease-in-out 220ms;\r\n        -ms-transition: ease-in-out 220ms;\r\n        -o-transition: ease-in-out 220ms;\r\n        transition: ease-in-out 220ms;\r\n        cursor: pointer;\r\n      }\r\n\r\n      .wishlist {\r\n        border: 2px solid #F71568;\r\n        background:transparent;\r\n        color: #F71568;\r\n        position: absolute;\r\n        bottom: -25px;\r\n        left: 0;\r\n        opacity: 0;\r\n        animation: fadeWish 1s cubic-bezier(.74, .06, .4, .92) forwards;\r\n        animation-delay: 1s;\r\n\r\n        &amp;:hover {\r\n          background: #F71568;\r\n          color: #FFF;\r\n          box-shadow: 0 0 26px #F71568;\r\n        }\r\n      }\r\n\r\n      .buy {\r\n        border: none;\r\n        background: #F71568;\r\n        color: #FFF;\r\n        position: absolute;\r\n        right: 0;\r\n        bottom: 0;\r\n        opacity: 0;\r\n        animation: fadeBuy 1s cubic-bezier(.74, .06, .4, .92) forwards;\r\n        animation-delay: 1s;\r\n\r\n        &amp;:hover {\r\n          box-shadow: 0 0 26px #F71568;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\/*\r\n  keyframes\r\n *\/\r\n\r\n@keyframes openBox {\r\n  0% {\r\n    width: 0px;\r\n    left: 15%;\r\n  }\r\n  100% {\r\n    width: 900px;\r\n    left: 15%;\r\n  }\r\n}\r\n\r\n@keyframes fadeImg {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes upVideo {\r\n  0% {\r\n    opacity: 0;\r\n    bottom: -20px;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    bottom: 0px;\r\n  }\r\n}\r\n\r\n@keyframes showDisc {\r\n  0% {\r\n    width: 0px;\r\n    left: 450px;\r\n  }\r\n  100% {\r\n    width: 500px;\r\n    left: 450px;\r\n  }\r\n}\r\n\r\n@keyframes fadeContent {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeWish {\r\n  0% {\r\n    opacity: 0;\r\n    bottom: -25px;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    bottom: 0;\r\n  }\r\n}\r\n\r\n@keyframes fadeBuy {\r\n  0% {\r\n    opacity: 0;\r\n    bottom: -25px;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    bottom: 0;\r\n  }\r\n}\r\n\r\n\r\n\r\n\/*ignore*\/\r\n\r\nfooter {\r\n  width: 350px;\r\n  height: 80px;\r\n  background: #FFCA1B;\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: -80px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n   animation: top 0.8s forwards;\r\n   \r\n  span {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 12px;\r\n    color: #fff;\r\n    font-family: 'Poppins';\r\n\r\n    i {\r\n      margin-right: 25px;\r\n      font-size: 22px;\r\n      color: #fff;\r\n      animation: icon 2s forwards;\r\n      opacity: 0;\r\n    }\r\n  }\r\n}\r\n\r\n@keyframes top {\r\n  0% {\r\n    opacity: 0;\r\n     bottom: -80px\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n     bottom: 0px\r\n\r\n  }\r\n}\r\n\r\n@keyframes icon {\r\n  0% {\r\n    opacity: 0;\r\n     transform: scale(0.0);\r\n  }\r\n   50% {\r\n      opacity: 1;\r\n     transform: scale(1.3) rotate(-02deg);\r\n      \r\n   }\r\n  100% {\r\n    opacity: 1;\r\n     bottom: 0px;\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; CSS animations\u00a0make it possible to animate transitions from one <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-product-page-with-css-keyframes-animation\/\" title=\"CSS Tutorial &#8211; Product Page with CSS Keyframes Animation\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[308,268,197,315,314,103,227],"newstopic":[],"class_list":{"0":"post-3294","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-float","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-keyframes-animation","12":"tag-revealing-effect","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3294","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=3294"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3294\/revisions"}],"predecessor-version":[{"id":3945,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3294\/revisions\/3945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3944"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3294"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}