dog.css

#bark1 {
    position: absolute;
    top: 5%;
    left: 120%;
    color: aliceblue;
    font-family: 'Heebo', sans-serif;
    font-size: 3em;
    font-weight: bold;
    opacity: 0;
    transform: translate(50%, -150%);
    /* visibility: hidden; */
}
#bark2 {
    position: absolute;
    top: 7%;
    left: 150%;
    color: aliceblue;
    font-family: 'Heebo', sans-serif;
    font-size: 3em;
    font-weight: bold;
    opacity: 0;
    transform: translate(50%, -120%);
    /* visibility: hidden; */
}

.dog {
display: block;
position: absolute;
top: 25%;
left: 15%;
transform: translate(-50%, -50%);
}
.dog .head {
display: block;
width: 100%;
height: 90px;
border-radius: 40px 40px 0px 0px;
position: absolute;
left: 0px;
bottom: 100%;
background: #FFCC66;
}
.dog .ears {
display: block;
width: 100%;
position: relative;
z-index: -1;
}
.dog .ears::before, .dog .ears::after {
content: "";
width: 30px;
height: 60px;
box-sizing: border-box;
position: absolute;
transition: transform 0.5s ease;
}
.dog .ears::before {
border-radius: 80px 20px 0px 0px;
left: 0px;
bottom: -40px;
background: #FDD17B;
transform: rotate(-59deg);
}
.dog .ears::after {
right: 0px;
bottom: -35px;
border: 10px solid #FDD17B;
border-radius: 20px 80px 0px 0px;
background: #FFF2D8;
transform: rotate(30deg);
}
.dog:hover .ears::before, .dog:hover .ears::after {
transform: none;
}
.dog .eyes {
display: block;
width: 100%;
margin: 15px 0px 6px;
line-height: 1rem;
text-align: center;
position: relative;
}
.dog .eyes::before, .dog .eyes::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin: 0px 12px;
border-radius: 50%;
background: #000;
animation: squeeze 2s infinite;
}
.dog .beard {
display: block;
width: 40px;
height: 40px;
margin: 0px auto;
border-radius: 5px 5px 15px 15px;
background: #FFF2D8;
position: relative;
}
.dog .beard::before {
content: "";
display: block;
width: 20px;
height: 10px;
margin: 0px auto;
border-radius: 0px 0px 10px 10px;
background: #333;
}
.dog .mouth {
display: block;
width: 30px;
height: 15px;
margin: 5px auto 0px;
border-radius: 0px 0px 15px 15px;
background: #000;
position: relative;
}
.dog .mouth::before {
content: "";
display: block;
width: 100%;
height: 3px;
position: absolute;
top: 0px;
left: 0px;
background: #FFF;
}
.dog:hover .mouth {
height: 2px;
border-radius: 0px 0px 15px 15px;
}
.dog:hover .mouth::before {
display: none;
}
.dog .tongue {
display: block;
width: 20px;
height: 20px;
margin-left: -10px;
border-radius: 3px 3px 10px 10px;
position: absolute;
top: 7px;
left: 50%;
background: #900;
animation: grow 0.1s infinite alternate;
}
.dog:hover .tongue {
height: 0px;
animation: none;
}
.dog .belt {
display: block;
width: 104%;
height: 20px;
border-radius: 3px;
background: #CC3300;
position: relative;
left: -2%;
z-index: 3;
}
.dog .belt::before {
content: "";
display: block;
width: 25px;
height: 25px;
margin-left: -12.5px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 50%;
background: #FFFFCC;
}
.dog .stomach {
display: block;
width: 100px;
padding: 30px 0px 0px;
background: #FFCC66;
position: relative;
}
.dog .stomach::before {
content: "";
display: block;
width: 50px;
height: 100px;
margin: 0px auto;
border-radius: 25px 25px 0px 0px;
background: #FFF2D8;
}
.dog .legs {
display: block;
position: relative;
}
.dog .legs::before, .dog .legs::after {
content: "";
display: block;
width: 16px;
height: 60px;
background: #FCB449;
position: absolute;
bottom: 0px;
z-index: 1;
}
.dog .legs::before {
left: -16px;
border-radius: 20px 0px 0px 0px;
}
.dog .legs::after {
right: -16px;
border-radius: 0px 20px 0px 0px;
}
.dog .legs .left, .dog .legs .right {
display: block;
width: 40px;
height: 70px;
position: absolute;
bottom: 0px;
z-index: 2;
}
.dog .legs .left::before, .dog .legs .left::after, .dog .legs .right::before, .dog .legs .right::after {
content: "";
display: block;
border-radius: 15px 15px 0px 0px;
position: absolute;
bottom: 0px;
}
.dog .legs .left::before, .dog .legs .right::before {
width: 30px;
height: 20px;
background: #FFCC66;
z-index: 2;
}
.dog .legs .left::after, .dog .legs .right::after {
width: 35px;
height: 15px;
background: #FCB449;
z-index: 1;
}
.dog .legs .left {
left: -20px;
}
.dog .legs .left::before {
right: 0px;
}
.dog .legs .left::after {
right: 15px;
}
.dog .legs .right {
right: -20px;
}
.dog .legs .right::before {
left: 0px;
}
.dog .legs .right::after {
left: 15px;
}
.dog .tail {
display: block;
width: 50px;
height: 120px;
border-radius: 0px 100% 0px 0px;
position: absolute;
left: 100%;
bottom: 20px;
z-index: -1;
transform: rotate(40deg) translate(5px, 0px);
animation: shake 0.1s infinite alternate;
}
.dog .tail::before, .dog .tail::after {
content: "";
display: block;
position: absolute;
left: 0px;
background: #FFCC66;
}
.dog .tail::before {
width: 60%;
height: 80%;
border-radius: 0px 100% 0px 0px;
top: 0px;
}
.dog .tail::after {
width: 75%;
height: 60%;
border-radius: 100% 0%;
top: 30%;
}

@keyframes squeeze {
90% {
    transform: none;
    animation-timing-function: ease-in;
}
93% {
    transform: scale(1.2, 0.3);
}
100% {
    animation-timing-function: ease-out;
}
}
@keyframes grow {
0% {
    animation-timing-function: ease-in;
}
100% {
    height: 25px;
}
}
@keyframes shake {
0% {
    transform: rotate(40deg) translate(5px, 0px);
}
100% {
    transform: rotate(35deg) translate(0px, 0px);
}
}