.animated {
    position: relative;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

#about #text-about.animated{
    animation-name: arrival_left;
}

#about .animated {
    animation-name: falling;
}

#experience .animated {
    animation-name: arrival_left;
}

#projects .animated {
    animation-name: arrival_left;
}

#projects h3.animated {
    animation-duration: 1s;
}

#skills .right-block .animated {
    animation-name: falling;
}

#contact .animated {
    animation-name: go-right;
    /*animation-delay: s;*/
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

#contact .appear {
    animation-name: appear_anim;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes arrival_left {
    0%   {color: transparent; right: 5em;}
    100% {color: -webkit-text; right: 0;}
}

@keyframes falling {
    0%   {color: transparent; bottom: 5em; opacity: 0;}
    100% {color: -webkit-text; bottom: 0; opacity: 1;}
}

@keyframes go-right {
    0%   {left: 0}
    100% {left: 20em}
}

@keyframes appear_anim {
    0%   {color: -webkit-text;}
    100% {color: transparent;}
}

progress {
    border-radius: 7px;
    height: 22px;
}
progress::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 7px;
}
progress::-webkit-progress-value {
    background-color: #7c5c2f;
    border-radius: 7px;
}

::-webkit-progress-value {
    transition: width 1s;
}