.spin {
    animation: spin;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes spin {
    from {transform:rotate(-90deg); opacity: 0}
    to {transform:rotate(15deg); opacity: 100}
}

.pf-animated {
    top: 10%;
    left: -100%;
    animation: fly-in;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes fly-in {
    from {left: -100%}
    to {left: 5%}
}

.code-animated {
    bottom: 10%;
    right: -100%;
    animation: fly-in-right;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes fly-in-right {
    from {right: -100%}
    to {right: 5%}
}

.text-animated {
    animation: text-in;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes text-in {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }
    50% {
        transform: translateX(50%);
        opacity: 1;
    }
    100% {
        transform: translateX(0%);
    }
}