NeumorphismUI Animation

Last Updated : 23 Dec, 2020

NeumorphismUI is a modern soft UI used in designing web elements, frames, and screens and is also a relatively new design trend that achieved great popularity these days. Its aesthetic is marked by minimal and real-looking UI that’s sort of a re-advancement of the old SkeuomorphismUI design trend.

HTML code:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="index.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="anime"></div> 
    </div> 
</body> 
  
</html> 

index.css: The following is the code for file “index.css” which is used in the above HTML code.

<style> 
    .container { 
        background: #f2f2f2; 
        box-sizing: border-box; 
        display: grid; 
        place-items: center; 
        width: 100vw; 
        height: 100vh; 
    } 
  
    .anime { 
        border-radius: 999px; 
        width: 50px; 
        height: 50px; 
        background: #f2f2f2; 
        box-shadow: 0 0 0 #ddd, 
            0 0 0 #fff, 
            10px 10px 10px #ddd inset, 
            -10px -10px 10px #fff inset; 
  
        /* Adding Animations */
        animation: gfg 5s cubic-bezier(0.16,  
            1, 0.3, 1) 1s infinite alternate; 
    } 
  
    @keyframes gfg { 
        0% { 
            width: 60px; 
            height: 60px; 
            background: #f2f2f2; 
            box-shadow: 0 0 0 #ddd, 
                0 0 0 #fff, 
                10px 10px 10px #ddd inset, 
                -10px -10px 10px #fff inset; 
        } 
  
        25% { 
            width: 60px; 
            height: 60px; 
            background: #fcfcfc; 
            box-shadow: 10px 10px 10px #ddd, 
                10px 10px 10px #fff, 
                0 0 0 #cccccc inset, 
                0 0 0 #fff inset; 
        } 
  
        50% { 
            width: 60px; 
            height: 160px; 
            background: #fcfcfc; 
            box-shadow: 10px 10px 10px #ddd, 
                10px 10px 10px #fff, 
                0 0 0 #ddd inset, 
                0 0 0 #fff inset; 
        } 
  
        100% { 
            width: 556px; 
            height: 77px; 
            /* background: #fefefe; */
            background: url( 
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png); 
            box-shadow: 40px 40px 40px #ddd, 
                0 0 0 #fff, 
                0 0 0 #ddd inset, 
                2px 2px 2px #fff inset; 
        } 
    } 
</style> 