.animation-opacity
{
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition:    opacity 0.3s linear;
    -o-transition:      opacity 0.3s linear;
    transition:         opacity 0.3s linear;
}
.animation-opacity.showed
{
    opacity: 1;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition:    opacity 0.3s linear;
    -o-transition:      opacity 0.3s linear;
    transition:         opacity 0.3s linear;
}

.animation-translate-right
{
    -webkit-transform: translate(10%, 0);
    -moz-transform: translate(10%, 0);
    -ms-transform: translate(10%, 0);
    -o-transform: translate(10%, 0);
    transform: translate(10%, 0);
    -webkit-transition: transform 0.3s ease-in;
    -moz-transition: transform 0.3s ease-in;
    -o-transition: transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
}
.animation-translate-right.showed
{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.animation-translate-left
{
    -webkit-transform: translate(-10%, 0);
    -moz-transform: translate(-10%, 0);
    -ms-transform: translate(-10%, 0);
    -o-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
    -webkit-transition: transform 0.3s ease-in;
    -moz-transition: transform 0.3s ease-in;
    -o-transition: transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
}
.animation-translate-left.showed
{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}