.example-container{margin:1rem auto 1.5rem;text-align:center;width:90%}.example-container:hover{cursor:pointer}.example-container.svg-animation{height:200px;overflow:hidden;position:relative}.ralph{height:280px;width:280px;margin:-14px auto 0}.example-container:hover .ralph__background{animation:grow 0.5s ease-out forwards}.example-container:hover .ralph__body{animation:moveInUp 0.5s ease-out forwards;animation-delay:0.2s}.example-container:hover .ralph__head{animation:moveInDown 0.5s ease-out forwards;animation-delay:0.5s}.example-container:hover .ralph__wifi-bar{animation:smallMoveInUp 0.5s ease-out forwards}.example-container:hover .ralph__wifi-bar:nth-child(1){animation-delay:1s}.example-container:hover .ralph__wifi-bar:nth-child(2){animation-delay:1.2s}.example-container:hover .ralph__wifi-bar:nth-child(3){animation-delay:1.4s}.ralph__background,.ralph__body,.ralph__head,.ralph__wifi-bar{opacity:0;transform-origin:50%}@keyframes grow{0%{transform:scale(0.3)}30%{transform:scale(1.2)}60%{transform:scale(0.9)}100%{opacity:1;transform:scale(1)}}@keyframes moveInUp{0%{transform:translate3d(0, 500px, 0)}60%{transform:translate3d(0, -12px, 0)}80%{transform:translate3d(0, 8px, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes moveInDown{0%{transform:translate3d(0, -500px, 0)}60%{transform:translate3d(0, 6px, 0)}80%{transform:translate3d(0, -3px, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes smallMoveInUp{0%{transform:translate3d(0, 8px, 0)}50%{transform:translate3d(0, -2px, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}